一、用的少并不代表没有用
至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。
为什么呢?是因为 direction 长得丑吗?
虽然说 direction 确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。
那是因为兼容性吗?
那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction 就已经被支持。
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
2.0+ | 1.3+ | Any | 9.2+ | 5.5+ | Any | 3.1+ |
那究竟是什么原因呢?
原因就在于我这篇文章写得太晚了!
CSS direction 属性简单好记,属性值少,兼容性好,关键时候省心省力,是时候给大家宣传宣传,不要埋没了人家的特殊技能。
二、CSS direction简介
基本上,大家只要关心下面这两个属性值就好了:
direction: ltr; // 默认值direction: rtl;
其中, ltr 是初始值,表示left-to-right,就是从左往右的意思,再具体描述下,就是内联内容是从左往右依次排布的,我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边。
rtl 则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个CSS声明,则前后两个图片,默认情况下,DOM在前的就显示在右侧;而且是在容器的右端。
例如mm1是张含韵,DOM结构如下:
<p class="rtl"><img src="/static/imghwm/default1.png" data-src="mm1.jpg" class="lazy" alt="CSS direction属性简介与实际应用_html/css_WEB-ITnose" > <img src="/static/imghwm/default1.png" data-src="mm2.jpg" class="lazy" alt="CSS direction属性简介与实际应用_html/css_WEB-ITnose" ></p>
结果,张妹子跑到了最右边,而不是左边,同时,貌似右对齐容器了,如下截图:
改变的只是内联元素块的左右顺序
需要注意的是,当 direction 属性的值是 rtl 的时候,我们的文字的前后顺序是不变了,例如:
<p class="rtl"><span>span1</span> <span>span2</span></p>
结果,还是span1在左边,span2在右边:
因为改变的只是 内联元素块 的左右顺序,所有的文字,即使使用内联标签分隔,实际上,还是一个同质内联盒子,是当作一个整体处理的,因此,只有近似右对齐效果,而具体每个文字都没有左右顺序的变化。
那什么是“内联元素块”呢?包括替换元素(replaced element),如 ,
您可以狠狠地点击这里: CSS direction属性与左右顺序测试demo
在IE浏览器下(至少IE11),设置 direction:rtl 会改变容器默认的 text-align 值,因为IE11在内的浏览器(IE11以上版本我尚未测试)都不支持 text-align:start/end 等CSS3属性值,而Chrome和FireFox浏览器均不会修改 text-align 值,因为这些浏览器的 text-align 初始值是 start ,这里大家也应该或多或少感受到了 text-align:start/end 这个新声明的作用和意义了——当 direction 值为 ltr 的时候, start 就表示 left ,当 direction 值为 rtl 的时候, start 就表示 right 。
三、CSS direction实际应用
CSS direction 可以让我们不改变DOM前后顺序的情况下,调换元素的前后顺序,在有些场景下非常有用。
下面是我真实遇到的例子:
基本上,做PC页面项目里都有一个Panel或者Dialog组件,就是弹框什么的。其中,下面会有“确定”,“取消”按钮,如下截图:
然后,具体很奇怪的,有几个Dialog,设计希望这两个按钮顺序是相反的。
如果只是上图的需求,想要改变按钮前后顺序变换其实只要使用浮动就可以了,所有按钮都 float:right :
.button { float: right; }
这个不难。但是,假如说我们的弹框按钮是居中显示的,例如,科科:
别说浮动了,飞动都满足不了需求,是不是又要求助万能的JS了,去改变DOM顺序?
别傻了,一行CSS direction:rtl 十几个字母,包你省心到家。我敢打包票,这一定是性价比最高的方法!
您可以狠狠地点击这里: CSS direction控制居中按钮顺序改变demo
当然,我们还有其他解决思路,不过兼容性嘛,咳咳~
.container, .button { transform: scaleX(-1); }
就是父级容器和按钮同时水平翻转,IE7,IE8倒是可以使用IE的翻转滤镜试试,好像是
flipX ,我以前有写过文章:“ CSS垂直翻转/水平翻转提高web页面资源重用性 ”,还好看了下,原来是 flipH,完整写法:
filter: FlipH;
不过,滤镜内再滤镜是否支持,我就不确定了,而且我也没兴趣对这些占着茅坑不拉屎的浏览器做测试,大家有兴趣可以自己试试看。
四、结束语
实际上 direction 属性关心的少,是因为……我想了想,还是因为大家没今早看到想本文这样分析介绍 direction 的文章,会让很多小伙伴,即使眼睛瞟到了,也认为是那个嘎吱角落的上世纪淘汰的CSS属性,实际上,人才被埋没了。
CSS direction 还有一个近亲 writing-mode ,可比 direction 复杂的多,也有意思的多,争取月底前也给大家介绍下。
以上,欢迎交流!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: http://www.zhangxinxu.com/wordpress/?p=5302
(本篇完)
- 没有相关文章

Les attributs booléens sont des attributs spéciaux en HTML qui sont activés sans valeur. 1. L'attribut booléen contrôle le comportement de l'élément par le fait qu'il existe ou non, comme les désactivés désactiver la boîte d'entrée. 2. Le principe de travail consiste à changer le comportement des éléments en fonction de l'existence d'attributs lorsque le navigateur analyse. 3. L'utilisation de base consiste à ajouter directement des attributs, et l'utilisation avancée peut être contrôlée dynamiquement via JavaScript. 4. Les erreurs courantes pensent à tort que les valeurs doivent être définies, et la bonne méthode d'écriture devrait être concise. 5. La meilleure pratique consiste à garder le code concis et à utiliser raisonnablement les propriétés booléennes pour optimiser les performances de la page Web et l'expérience utilisateur.

Le code HTML peut être plus propre avec des validateurs en ligne, des outils intégrés et des processus automatisés. 1) Utilisez W3CMarkUpValidations Service pour vérifier le code HTML en ligne. 2) Installez et configurez l'extension htmlhint dans VisualStudiocode pour une vérification en temps réel. 3) Utilisez HTMLTIDY pour vérifier et nettoyer automatiquement les fichiers HTML dans le processus de construction.

HTML, CSS et JavaScript sont les technologies de base pour la création de pages Web modernes: 1. HTML définit la structure de la page Web, 2. CSS est responsable de l'apparence de la page Web, 3. JavaScript fournit une dynamique de page Web et une interactivité, et ils travaillent ensemble pour créer un site Web avec une bonne expérience d'utilisation.

La fonction de HTML est de définir la structure et le contenu d'une page Web, et son objectif est de fournir un moyen standardisé d'afficher des informations. 1) HTML organise différentes parties de la page Web via des balises et des attributs, tels que des titres et des paragraphes. 2) Il soutient la séparation du contenu et des performances et améliore l'efficacité de maintenance. 3) Le HTML est extensible, permettant aux balises personnalisées d'améliorer le référencement.

Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML définit la structure de la page Web, 2. CSS contrôle le style de page Web, et 3. JavaScript ajoute un comportement dynamique. Ensemble, ils construisent le cadre, l'esthétique et l'interactivité des sites Web modernes.

L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: HTML est responsable de la structure du contenu, CSS est responsable du style et JavaScript est responsable du comportement dynamique. 1. HTML définit la structure et le contenu de la page Web via des balises pour assurer la sémantique. 2. CSS contrôle le style de page Web via des sélecteurs et des attributs pour le rendre beau et facile à lire. 3. JavaScript contrôle le comportement de la page Web via les scripts pour atteindre des fonctions dynamiques et interactives.


Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel

MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.

MantisBT
Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft
