CSSディレクションの紹介と実践attribute_html/css_WEB-ITnose

1. 使用頻度が低いからといって役に立たないというわけではありません

少なくとも、私がこれまで関わってきた多くのプロジェクトの中で、CSS の方向属性を使用している人を見たことがありません。実際の開発。

なぜですか?方向性が悪いからでしょうか？

確かに演出はダサいですが、CSSは可愛いという世界ではありません。

それは互換性のせいですか?

そんなことはありません。「美人」が本当に美人だった時代には、CSS の方向性は IE6 を含むブラウザーですでにサポートされていました。

Chrome	Safari	Firefox	Opera	IE	Android	iOS
2.0+	1.3+	Any	9.2+	5.5+	Any	3.1+

では、その理由は何でしょうか？

その理由は、この記事を書くのが遅すぎたからです。

CSS の方向属性はシンプルで覚えやすく、属性値が少なく、互換性が高いので、重要なときに心配と労力を節約できます。他の人のものを隠蔽する必要はありません。特別なスキル。

2. CSS の方向性の紹介

基本的には、次の 2 つの属性値だけを気にする必要があります。

direction: ltr;   // 默认值direction: rtl;

このうち、ltr は初期値です。これは、左から右という意味です。より具体的に説明すると、これは通常、Web ページの前後の 2 つの画像を処理する方法です。 , 左側に手前の DOM が表示されます。

rtl とは、right-to-left の略称で、詳しく説明すると、インラインコンテンツを右から左に並べてアプリケーションに追加します。この CSS ステートメントは、前後の 2 つのイメージについて、デフォルトでは、DOM が前にあるイメージが右側に表示され、コンテナーの右端に配置されることを意味します。

たとえば、mm1 は Zhang Hanyun で、DOM 構造は次のとおりです。

<p class="rtl"><img src="mm1.jpg"> <img src="mm2.jpg"></p>

その結果、Zhang 姉は左ではなく右端に走りました。同時に、以下のスクリーンショットに示すように、コンテナーが右揃えになっているように見えます。

変更されるのは、インライン要素ブロックの左と右の順序のみです

方向属性の値が rtl の場合、テキストの前後の順序は変更されないことに注意してください。例:

<p class="rtl"><span>span1</span> <span>span2</span></p>

結果これは、span1 が依然として左側にあり、span2 が右側にあることです。

これは、インライン要素ブロックのみが変更されたためです。 Sequence の左右の順序が変わります。

では、「インライン要素ブロック」とは何でしょうか? a1f02c36ba31691bcfe87b2722de723b 、 bb9345e55eb71822850ff156dfde57c8 、 39000f942b2545a5315c57fa3276f220 などの置換された要素、またはインラインブロックの水平要素が含まれます。したがって、上記のspan1とspan2の例では、いずれかのspanがdisplay:inline-blockに設定されている場合、左と右の順序で変更が表示されます。

ここをクリックできます: CSS 方向属性と左右の順序のテストデモ

IE ブラウザー (少なくとも IE11) で、direction:rtl を設定すると、コンテナーのデフォルトの text-align が変更されます。 IE11 を含むブラウザ (IE11 以降はテストしていません) は text-align:start/end などの CSS3 属性値をサポートしておらず、Chrome ブラウザも FireFox ブラウザも text-align 値を変更しないためです。これらのブラウザでは、デバイスの text-align の初期値は start です。ここで、新しいステートメント text-align:start/end の役割と重要性を多かれ少なかれ感じてください。方向の値が ltr の場合、start は左を意味します。方向の値は rtl で、開始は右を意味します。

3. CSS 方向の実際の適用

CSS 方向を使用すると、DOM の順序を変更せずに要素の順序を変更できます。これは、一部のシナリオで非常に役立ちます。

以下は私が実際に遭遇した例です:

基本的に、すべての PC ページ プロジェクトには、ポップアップ ボックスなどであるパネルまたはダイアログ コンポーネントがあります。その中には、以下のスクリーンショットに示すように、[OK] ボタンと [キャンセル] ボタンがあります:

詳細は非常に奇妙で、いくつかのダイアログがあり、デザインは2つのボタンの順序が逆になることを望みます。

上の図だけが必要な場合、ボタンの順序を変更したい場合は、すべてのボタンを float:right にするだけです:

.button { float: right; }

これは難しいことではありません。ただし、ポップアップ ボタンが中央に表示されている場合、たとえば Keke:

浮遊はおろか、飛行さえもニーズを満たせない場合、汎用に頼る必要がありますか? JS で DOM の順序を変更するには?

愚かなことはしないでください。CSS の direct:rtl の 1 行には 12 文字以上が含まれているため、多くの手間が省けます。これが最も費用対効果の高い方法であることを保証します。

ここをクリックできます: CSS 方向コントロールセンターのボタン順序変更デモ

もちろん、他の解決策もありますが、それは互換性の問題です、咳咳 ~

.container, .button { transform: scaleX(-1); }

は親コンテナとボタンを同時に水平方向に反転することを意味します。IE 7 と IE8 の場合は、以前に記事を書いた

の反転フィルターを使用してみてください。 : 「CSS の垂直反転/水平反転により、Web ページ リソースの再利用性が向上します。」 詳しく見てみると、flipH

であることが判明し、完全な記述は次のとおりです:

filter: FlipH;

ただし、フィルター内のフィルターがサポートされているかどうかはわかりません。また、これらのブラウザをテストすることに興味がありません。興味がある場合は、試してみてください。それは自分自身です。

4. 結論

実際、方向属性はあまり気にしません。なぜなら...私が考えたこと、または今朝、分析して紹介する記事を見ていなかったからです。多くの友人は、それを垣間見たとしても、それは前世紀に廃止された CSS 属性だと考えています。実際、その才能は埋もれています。

CSS ディレクションには、近い関係にあるライティング モードもあります。これは、ディレクションよりもはるかに複雑で興味深いものです。今月末までに紹介したいと思います。

以上、コミュニケーション大歓迎です！

この記事はオリジナルの記事であり、ナレッジポイントは頻繁に更新され、いくつかの間違いが修正されるため、追跡可能性を高め、誤解を招くことを避けるために、元のソースを保持してください。古くて誤った知識により、より多くの更新が行われる予定です。

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5302

(この記事はここまで)

• 関連性のない記事