コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 「」が非推奨になった理由と、最良の代替手段は何ですか?

「」が非推奨になった理由と、最良の代替手段は何ですか?

Linda Hamilton
リリース： 2024-12-05 13:40:11
オリジナル
453 人が閲覧しました

Why Was `` Deprecated, and What are the Best Alternatives?

の廃止の背後にある理由を明らかにするおよび代替ソリューションの探索

HTML タグ は非推奨であるため、多くの好奇心を集めています。その使用法と代替手段の必要性に関して、さまざまな懸念が提起されています。

の非推奨についてこれは、その固有のアクセシビリティの問題に起因しています。自動スクロール動作は、スクリーン リーダーが支援技術ユーザーにコンテンツを効果的に伝える能力を妨げる可能性があります。さらに、人によっては発作やめまいを誘発する可能性があり、ユーザー エクスペリエンスにとって不適切な選択となります。

CSS 属性: 短縮された試み

CSS 属性には marquee-play-count、marquee などがありますが、 -direction と marquee-speed はかつて仕様の一部でしたが、ブラウザ間の互換性と、

とらえどころのない代替手段の公開

W3 コンソーシアムは、 の代替として CSS3 アニメーションを提唱しています。 CSS3 アニメーションは柔軟性と制御性に優れていますが、単純な <> アニメーションに比べて、より複雑な設定が必要になります。 syntax.

とらえどころのない代替手段の公開
.marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0%, 0%); }
    100% { transform: translate(-50%, 0%); }
}
ログイン後にコピー

JavaScript では、スクロール マーキー効果を提供する多数のサードパーティ ライブラリも提供しています。ただし、これらのライブラリは多くの場合、プロジェクトに不必要な複雑さを加え、コードベースが肥大化し、メンテナンスの課題が生じる可能性があります。

解決策が見えてきましたシンプルさとアクセシビリティを兼ね備えた注目すべきソリューションには、CSS3 アニメーションの使用が含まれます。次のコード スニペットは、このアプローチを示しています。このソリューションは、スクリーン リーダーのアクセシビリティを維持しながら、非スクロール効果を提供します。逆方向 (下から上) の場合は、アニメーション キーフレームの translation() 値を変更するだけです。

以上が「」が非推奨になった理由と、最良の代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：jQueryの-moz-transformから回転角度を抽出する方法は? 次の記事：Bootstrap 4 のカード列を使用して石積みのレイアウトを実現するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2201
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2347
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1965
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1853
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1914
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート