Explication détaillée de l'utilisation des propriétés spécifiques à WebKit de certaines propriétés avancées cachées dans CSS3

Bien que les navigateurs modernes prennent déjà en charge de nombreuses propriétés CSS3, la plupart des concepteurs et développeurs semblent encore se concentrer sur certaines propriétés très « classiques », telles que border-radius, box-shadow ou transform. Ils sont bien documentés, bien testés et sont les plus utilisés. Par conséquent, si vous concevez un site Web de nos jours, il est difficile de vivre sans eux.

Mais cachées dans le vaste trésor du navigateur se trouvent des propriétés avancées et largement sous-estimées qui ne retiennent pas beaucoup d'attention. Peut-être que certains d’entre eux devraient être ainsi (ignorés), mais d’autres attributs devraient être davantage reconnus. Les plus grands trésors se trouvent sous Webkit, et à l'ère des iPhones, iPads et applications Android, il est utile de commencer à les comprendre. Même le moteur Gecko utilisé par Firefox et d'autres offre des propriétés uniques. Dans cet article, nous examinerons les propriétés CSS 2.1 et CSS3 moins connues et leur prise en charge dans les navigateurs modernes.

Remarque : Pour chaque attribut, nous précisons ici : « WebKit » fait référence aux navigateurs utilisant le noyau Webkit (Safari, Chrome, iPhone, iPad, Android, etc.), « Gecko » fait référence au noyau Gecko navigateur (Firefox, etc.). Ensuite, il existe des propriétés qui font partie de la spécification officielle CSS 2.1, ce qui signifie que davantage de navigateurs et même certains navigateurs plus anciens les prendront en charge. Enfin, une balise CSS3 identifie les propriétés conformes à la norme et prises en charge par les dernières versions des navigateurs, telles que Firefox 4, Chrome 10, Safari 5, Opera 11.10 et IE9.

-webkit-mask

Cet attribut est assez puissant, donc une introduction détaillée dépasse le cadre de cet article. Il vaut la peine d'être étudié en profondeur, car il peut vous épargner des applications pratiques. Beaucoup de temps.

-webkit-mask permet d'ajouter un masque à un élément, afin de pouvoir créer des motifs de formes arbitraires. Le masque peut être un dégradé CSS3 ou une image PNG translucide. Lorsque la valeur alpha de l'élément de masque est 0, il couvrira les éléments sous-jacents, et lorsqu'elle est 1, il affichera complètement le contenu sous-jacent. Les attributs pertinents incluent -webkit-mask-clip, -webkit-mask-position et -webkit-mask-repeat, etc., qui dépendent fortement de la syntaxe en arrière-plan. Pour plus d'informations, consultez le blog du webkit et le lien ci-dessous.

Exemple

Masque d'image :

.element{
background: url(img/image.jpg) repeat;
-webkit-mask: 
url(img/mask.png);
}

Exemple

Masque dégradé :

.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

-webkit-text -AVC

Un inconvénient des bordures CSS est qu'elles ne peuvent être utilisées que pour des éléments rectangulaires. -webkit-text-stroke peut ajouter des bordures au texte. Il peut non seulement définir la largeur de la bordure du texte, mais également sa couleur. De plus, en utilisant l’attribut color: transparent, vous pouvez également créer des polices creuses !

Exemple

Définissez une bordure bleue de 2 pixels de large pour tous les titres

 :

h1 {-webkit-text-stroke: 2px blue}

Une autre fonctionnalité consiste à définir des bordures transparentes de 1 px pour rendre le texte fluide :

 h2 {-webkit-text-stroke: 1px transparent}

Créer une police creuse rouge :

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

-webkit-nbsp-mode

Les sauts de ligne peuvent être parfois délicat : parfois vous souhaitez que le texte soit interrompu (plutôt que renvoyé à la ligne) à l'endroit approprié, et parfois non. Une propriété qui contrôle cela est -webkit-nbsp-mode, qui vous permet de modifier le comportement des espaces, forçant le texte à se briser là où il est utilisé. Ceci peut être réalisé en définissant la valeur sur espace.

-webkit-tap-highlight-color

Cette propriété est uniquement disponible sur iOS (iPhone et iPad). Lorsque vous cliquez sur un lien ou un élément cliquable défini via Javascript, il apparaîtra avec un fond gris semi-transparent. Pour réinitialiser ce comportement, vous pouvez définir -webkit-tap-highlight-color sur n'importe quelle couleur.

Pour désactiver cette mise en évidence, définissez la valeur alpha de la couleur sur 0.

Exemple

Définissez la couleur de surbrillance sur 50 % de rouge transparent :

   -webkit-tap-highlight-color: rgba(255,0,0,0.5);

Prise en charge du navigateur : iOS (iPhone et iPad) uniquement.

Étendu lecture : Bibliothèque des développeurs Safari

zoom : réinitialiser

De manière générale, le zoom est un attribut spécifique à IE. Mais webkit a également commencé à le prendre en charge, et en utilisant la réinitialisation de la valeur, webkit peut obtenir de bons résultats (fait intéressant, IE ne prend pas en charge cette valeur). Il vous permet de réinitialiser le comportement normal du zoom dans le navigateur - si un élément est déclaré zoom:reset, les autres éléments de la page zoomeront lorsque l'utilisateur zoomera sur la page.

Remarque : en fait, nous utilisons souvent -webkit-text-size-adjust:none ; lors de la désactivation de la taille de police forcée de Chrome, cela peut également obtenir un effet similaire ; Le texte à l'intérieur ne sera pas agrandi/rétréci, mais d'autres éléments de la page changeront - Shenfei

-webkit-margin-collapse

这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。

最常见的例子就是两个相邻的

元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

-webkit-box-reflect

你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

示例

这个倒影会出现在它的父元素的下面并有5px的间距:

  -webkit-box-reflect: below 5px;

这个倒影会投射到元素的右边，没有间距。然后，一个蒙板将会被应用(url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

-webkit-marquee

另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

示例

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。

   

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!