Une explication détaillée des détails en CSS

Vous pouvez écrire ainsi jusqu'à ce qu'il y ait un élément enfant qui doit être défini avec une taille de police différente, par exemple, dans une balise comme celle-ci :

The cat sat on the mat.

Si vous voulez pour définir la taille de la police de span sur 1,2em, que devez-vous faire ? Sortez la calculatrice et calculez la valeur de 1,2 divisée par 1,4. Le résultat est le suivant :

p span { font-size: 0.85714em; }

Ce problème ne se limite pas à eux. Si vous utilisez des pourcentages pour créer un site Web à mise en page fluide et réactif et que le pourcentage est lié au conteneur, donc si vous souhaitez définir un élément à 40 % de son conteneur, sa hauteur est de 75 % et sa largeur doit être définie sur 53,33333% .
Évidemment, c'est très gênant.
Unité de longueur liée à la racine
Pour résoudre le problème de définition de la taille de police, l'unité rem (racine em) peut désormais être utilisée. Rem est aussi une unité relative, mais elle correspond à une valeur de base fixe. Cette valeur de base fixe est la taille de police de l'élément racine du document (dans un fichier HTML, c'est l'élément html). En supposant que c'est la même chose que l'exemple précédent et que la taille de police de 10 px est également définie comme taille de l'élément racine, alors le CSS peut écrire comme ceci :

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

Ces deux règles CSS concernent l'élément racine. La taille de la police de l'élément est plus élégante et plus simple, notamment lors de la définition de valeurs simples telles que 10px ou 12px. Ceci est très similaire à l'utilisation des valeurs px, sauf que rem est extensible.
Parmi les fonctionnalités présentées dans l'ensemble de l'article, la fonctionnalité rem a une compatibilité relativement bonne et peut être prise en charge par les navigateurs avancés, y compris IE9, à l'exception d'Opera Mobile.
Unités de longueur liées aux fenêtres
Je pense que l'unité rem est cool. Ce serait encore plus cool s'il y avait un autre ensemble d'unités qui pourraient résoudre le problème du pourcentage. Il est similaire à rem, mais la différence est qu'il n'est pas relatif à l'élément racine du document, mais à la taille de la fenêtre du périphérique elle-même.
Ces deux unités sont vh et vw, qui correspondent à la hauteur et à la largeur par rapport à la taille de la fenêtre. Chaque unité est précédée d'un chiffre pour indiquer le pourcentage qu'elle représente.

p { height: 50vh; }

Dans l'exemple ci-dessus, la hauteur est définie sur la moitié de la hauteur de la fenêtre. 1vh équivaut à un pourcentage de la hauteur de la fenêtre, donc 50vh correspond à 50 % de la hauteur de la fenêtre.
Si la taille de la fenêtre change, cette valeur changera également. L'avantage de cela par rapport au pourcentage est que vous n'avez pas à vous soucier du conteneur parent. Quel que soit son conteneur parent, l'élément 10vw fera toujours 10 % de la taille de la fenêtre.
En conséquence, il existe l'unité vmin, qui équivaut à la valeur minimale de vh ou vw. Il a été récemment annoncé que l'unité vmax serait ajoutée au document de spécification (bien qu'elle n'ait pas encore été publiée au moment de la publication). cet article).
Actuellement, IE9+, Chrome et Safari 6 prennent en charge cette fonctionnalité.
Valeur de l'expression
Si vous créez un site Web à mise en page fluide et réactif, vous rencontrerez souvent le problème des unités mixtes - en utilisant un pourcentage pour définir la grille, mais en utilisant une largeur de pixel fixe pour définir la marge. Par exemple :

p { margin: 0 20px; width: 33%;}

Si la mise en page utilise uniquement un remplissage et une bordure, vous pouvez utiliser le dimensionnement de la boîte pour le résoudre, mais vous ne pouvez rien faire concernant la marge. Un moyen meilleur et plus flexible consiste à utiliser la fonction calc() pour établir des équations mathématiques entre différentes unités, telles que :

p { margin: 0 20px; width: calc(33% - 40px);}

Elle peut non seulement être utilisée pour calculer la largeur - ; Si nécessaire, vous pouvez ajouter calc() dans calc().
Cette fonctionnalité est prise en charge à la fois par IE9+ et Firefox. Firefox doit ajouter le préfixe -moz- (il n'est peut-être pas nécessaire d'ajouter le préfixe dans la version 16 ou 17. Chrome et Safari le prennent également en charge, mais ils doivent l'ajouter). le préfixe -webkit-. Cependant, Webkit mobile ne le prend pas encore en charge.
Chargez quelques polices à partir de la bibliothèque de polices
Des performances supérieures sont souvent importantes, en particulier la variété des appareils mobiles sur le marché - entraînant des différences et des incertitudes dans les vitesses de connexion - reflète davantage cette importance. L'un des moyens d'accélérer le chargement des pages est de réduire le nombre de fichiers externes. Un nouvel attribut de @font-face, unicode-range, est né à cet effet.
Cet attribut est unicode-range (plage d'encodage), qui représente la plage de paramètres de la police d'encodage. Lors du chargement de fichiers externes, seules les polices utilisées seront chargées, pas la totalité de la bibliothèque de polices. Le code suivant montre comment charger uniquement trois polices de la bibliothèque de polices foo.ttf :

@font-face {font-family: foo;src: url(‘foo.ttf’);unicode-range: U+31-33;}

　　这点对于使用字体图标的页面尤其有用。我测试过，使用unicode-range，加载字体文件的时间平均减少了0.85秒，也不是小数目了。当然，你可能不会这么想。 
　　这个属性，目前可以在IE9+、Webkit浏览器（如Chrome和Safari）中运行。 
新的伪类 
　　单位和值都应该好好利用，但是，让我更兴奋的是选择器和伪类。完善的选择器模式，即使只有少数浏览器支持，都让我兴奋不已。引用乔布斯的话：你要把栅栏的里面修得和外面一样漂亮，即使别人看不到里面——因为你自己知道。 
　　我第一次使用:nth-of-type()的时候，简直是一次突破，就像我冲出了思想的桎梏。好吧，我有些夸张了。但有些新的CSS伪类，确实值得狂热一番。 
否定伪类 
　　你大概不知道 :not() 伪类的好，除非你亲自实践一番。带有参数的 :not() 其实就是普通的选择器——不是复合选择器。一组元素加上选择器 :not()，表示满足这个参数的元素会被排除出去。听起来有些复杂吧？但是实际上非常简单。 
　　假设：要对项目列表的奇数行进行选择，但是最后一行除外。如果是以前，需要这样写： 

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

　　现在，通过设定:last-child作为否定伪类的参数，就可以把最后一个元素排除，这样少了一行代码，从而更加的简洁和易维护。 

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

　　否定伪类看起来并没有什么惊人之处，你可以不用它，但是它还是挺实用的。我曾经把它用在基于Webkit的项目当中，优势还是挺明显的。说实话，它是我最喜欢的伪类之一。 
　　是的，我有最喜欢的伪类。 
　　在本文提到的特性当中，否定伪类是兼容性最好的，它被IE9+和高级浏览器支持（不需要加浏览器产商前缀）。如果你熟悉jQuery，你可能习惯用它——版本1.0开始就有了，以及相似的not()方法。 
“适用于”伪类 
　　:matches() 伪类可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。太棒了！但是，它能做什么？ 
　　:matches() 伪类最强大的地方就是聚合多行选择器。例如，要选择父容器里面其中几个不同子容器里面的p元素，在这之前，代码或许会写成这样： 

.home header p,.home footer p,.home aside p {color: #F00;}

　　有了:matches()伪类，就可以把共同点提取出来，缩减代码量。该例子里面，选择器的共同点是以home为起点、以p为终点，所以可以用:matches()把中间的所有元素集合起来。是不是有些困惑？看看代码就明白了： 

.home :matches(header,footer,aside) p { color: #F00; }

　　这其实是CSS4的一部分（确切地说，是CSS选择器第四等级），这份规范文档还提到将会有类似的语法（以逗号隔开的复合选择器）应用于:not()伪类。兴奋ing！ 
　　目前，:matches()可以在Chrome和Safari浏览器中运行，但是要加上前缀-webkit-，Firefox也支持，但是要按照旧的写法:any()，同时要加上-moz-前缀。 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!