コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > `` タグが非推奨になったのはなぜですか? スクロール テキストを作成するための最良の代替手段は何ですか?

`` タグが非推奨になったのはなぜですか? スクロール テキストを作成するための最良の代替手段は何ですか?

Linda Hamilton
リリース： 2024-12-18 07:18:11
オリジナル
741 人が閲覧しました

Why is the `` tag deprecated, and what's the best alternative for creating scrolling text?

なぜ <マーキー>は非推奨です: 論争を理解する

The タグは、かつてはスクロール テキスト アニメーションを作成するために使用される人気の HTML 要素でしたが、アクセシビリティの問題とブラウザの不一致により使用されなくなりました。その非推奨は、より現代的で効率的な Web デザイン手法への移行を意味します。

アクセシビリティの問題:

によって生成されるテキストのスクロールは、ユーザーにとって困難な場合があります。認知障害、発作障害、または前庭障害のあるユーザー。継続的に動作すると、見当識障害、吐き気、片頭痛を引き起こす可能性があります。さらに、<マーキー>内のテキストは、スクリーン リーダーで解析するのが難しい場合があり、視覚障害のあるユーザーにとってアクセシビリティの障壁が生じます。

ブラウザの非互換性と標準化の失敗:
.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(-100%, 0); }
}
ログイン後にコピー

はブラウザ間でサポートが一貫していないことに直面しており、一部の古いブラウザではレンダリングが停止されています。この動作のばらつきにより、開発者にとって一貫した機能を確保することが困難になりました。さらに、「marquee-play-count」や「marquee-speed」などの CSS プロパティを標準化する取り組みにもかかわらず、これらは最終的に仕様から削除され、スクロール テキストを作成するための強力な CSS 代替手段は残されていません。 の最も簡単な置換は何ですか:ですがは非推奨のままですが、最新の CSS3 アニメーションは、テキストの動きの効果を作成するための強力でアクセスしやすいソリューションを提供します。 CSS3 を使用すると、開発者は、主要なブラウザ間で互換性のある、よりスムーズでカスタマイズ可能なアニメーションで同様のスクロール効果を実現できます。次のコード スニペットは、テキストを水平方向にスクロールする単純な CSS3 アニメーションの例を示しています。CSS3 アニメーションを活用することで、開発者は視覚的に魅力的でアクセスしやすく、主要なブラウザ間で互換性のあるスクロール テキスト効果を作成できるため、非推奨の タグ。

以上が`` タグが非推奨になったのはなぜですか? スクロール テキストを作成するための最良の代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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