検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >「」が非推奨になった理由と、最良の代替手段は何ですか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-05 13:40:11520ブラウズ

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 サイトの他の関連記事を参照してください。

css css3 html count for while using this animation Translate
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQueryの-moz-transformから回転角度を抽出する方法は?次の記事：jQueryの-moz-transformから回転角度を抽出する方法は?

関連記事

続きを見る