Introduction to the "reprint" CSS Direction property and its practical application

Article reproduced from Zhang Xin Xu-Xin space-Xin Life http://www.zhangxinxu.com/wordpress/

Original link: http://www.zhangxinxu.com/wordpress/?p=5302

One, the use of less does not mean that no use

At least, in so many projects I've contacted, I haven't seen the actual development of CSS direction properties.

Why is it? Is it because it direction looks ugly?

Although direction it is really ugly, but CSS is not a look at the face of the world to sell.

Is that because of compatibility?

It is not, in the "beautiful" is indeed a beautiful age, including IE6, the browser, CSS direction has been supported.

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

What is the reason for that?

The reason is that I wrote this article too late!

CSS direction properties are simple and easy to remember, the property value is small, compatibility is good, the key time saving effort, it is time to promote publicity, do not bury the special skills of others.

Ii. Introduction to CSS direction

Basically, you just care about the following two attribute values:

direction:ltr;   Default value Direction:rtl;

Among them, ltr is the initial value, represents Left-to-right, is from left to right meaning, and then specifically described below, is the inline content is from left to right in order to arrange, we usually web page processing is such, for example, before and after two pictures, by default, the DOM in front of the display on the left.

rtlis another value, right-to-left abbreviation, that is, from right to left meaning, and then specifically described below, that is, inline content is from right to left to arrange, add the application of this CSS declaration, then the front and back two pictures, by default, the DOM in front of the display on the right side, but also in the right side of the container.

For example, MM1 is a rhyme with the DOM structure as follows:

<p class= "RTL" > </p>

As a result, Zhang sister ran to the far right, not to the left, at the same time, seemingly right to align the container, as follows:

The change is just the left and right order of the inline element block
It is important to note that when the direction value of the property is, the rtl order of our text is unchanged, for example:

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

As a result, still span1 on the left, span2 on the right:

Because the change is only 内联元素块 the left and right order, all the text, even if the use of inline label separation, in fact, or a homogeneous inline box, is treated as a whole, so, only approximate to the correct alignment effect, and the specific text does not have the left and the next order of change.

What is the "inline element block"? Includes elements that replace elements (replaced element), such as,,,, <button> <input> <video> <object> etc., or inline-block horizontal. Therefore, the above span1, span2 example, only any one of the span settings display:inline-block , will see the changes in the left and right order.

You can really click here: CSS Direction properties and left and right order test demo

Under IE (at least IE11), the settings direction:rtl will change the default value of the container text-align , because the browser (IE11 or later I have not tested) does not support text-align:start/end such CSS3 property values, and Chrome and Firefox browser will not be modified text-alignvalues, because the initial values of these browsers text-align are start , here, you should be more or less aware of the text-align:start/end role and significance of this new statement-when direction the value is ltr , start it means left that when direction rtlwhen the value is, start it is indicated right .

Third, CSS direction practical application

CSS allows direction us to change the order of the elements before and after the DOM sequence, which is useful in some scenarios.

Here are some examples of what I actually encounter:

Basically, a PC page project has a panel or dialog component, which is a box or something. Here, there will be "OK", "Cancel" button, as follows:

Then, specifically very strangely, there are several dialog, designed to hope that the two button sequences are reversed.

If only the demand, want to change the button before and after the order of the transformation in fact, as long as the use of floating on it, all buttons float:right :

. button {float:right;}

It's not hard. However, if we say that our frame buttons are centered, for example, Koko:

Don't say floating, flying can not meet the demand, is also to help the Almighty JS, to change the DOM order?

Don't be silly, a line of CSS direction:rtl more than 10 letters, package you worry home. I dare to pack a ticket, this must be the most cost-effective method!

You can really click here: CSS Direction Control Center Button Order Change Demo

Of course, we have other solutions, but compatibility, cough ~

. Container,. button {Transform:scalex (-1);}

is the parent container and button at the same time flip horizontal, IE7,IE8 can use IE flip filter to try, as if flipX , I have written before: "CSS vertical flip/horizontal flip to improve the reuse of Web page resources", fortunately, the original is flipH , the complete wording:

Filter:fliph;

However, I am not sure if the filter is supported by the filter, and I am not interested in these manger do not poop browser test, we are interested to try it yourself.

Introduction to the "reprint" CSS Direction property and its practical application