Detaillierte Erläuterung der Verwendung WebKit-spezifischer Eigenschaften einiger versteckter erweiterter Eigenschaften in CSS3

Obwohl moderne Browser bereits viele CSS3-Eigenschaften unterstützen, scheinen sich die meisten Designer und Entwickler immer noch auf einige sehr „mainstream“-Eigenschaften zu konzentrieren, wie etwa border-radius, box-shadow oder transform. Sie sind gut dokumentiert, gut getestet und werden am häufigsten verwendet. Wenn Sie also heutzutage eine Website entwerfen, ist es schwierig, ohne sie zu leben.

Aber in der riesigen Schatzkammer des Browsers verbergen sich einige fortschrittliche, stark unterschätzte Eigenschaften, die nicht viel Beachtung finden. Vielleicht sollten einige davon so sein (ignoriert), aber andere Attribute sollten mehr Anerkennung finden. Die größten Schätze liegen unter Webkit, und im Zeitalter von iPhones, iPads und Android-Apps ist es nützlich, sie zu verstehen. Sogar die von Firefox und anderen verwendete Gecko-Engine bietet einige einzigartige Eigenschaften. In diesem Artikel werfen wir einen Blick auf weniger bekannte CSS 2.1- und CSS3-Eigenschaften und deren Unterstützung in modernen Browsern.

Hinweis: Für jedes Attribut legen wir hier fest: „WebKit“ bezieht sich auf Browser, die den Webkit-Kernel verwenden (Safari, Chrome, iPhone, iPad, Android usw.), „Gecko“ bezieht sich auf den Gecko-Kernel Browser (Firefox usw.). Dann gibt es Eigenschaften, die Teil der offiziellen CSS 2.1-Spezifikation sind, was bedeutet, dass sie von mehr Browsern und sogar einigen älteren Browsern unterstützt werden. Schließlich identifiziert ein CSS3-Tag Eigenschaften, die dem Standard entsprechen und von den neuesten Browserversionen unterstützt werden – wie Firefox 4, Chrome 10, Safari 5, Opera 11.10 und IE9.

-webkit-mask

Dieses Attribut ist sehr leistungsfähig, daher würde eine detaillierte Einführung den Rahmen dieses Artikels sprengen. Es lohnt sich, es eingehend zu studieren, da es Ihnen bei praktischen Anwendungen helfen kann. Viel Zeit.

-webkit-mask ermöglicht das Hinzufügen einer Maske zu einem Element, sodass Sie Muster beliebiger Formen erstellen können. Die Maske kann ein CSS3-Verlauf oder ein durchscheinendes PNG-Bild sein. Wenn der Alpha-Wert des Maskenelements 0 ist, werden die darunter liegenden Elemente abgedeckt, und wenn er 1 ist, wird der darunter liegende Inhalt vollständig angezeigt. Zu den zugehörigen Eigenschaften gehören -webkit-mask-clip, -webkit-mask-position und -webkit-mask-repeat usw., die stark von der Syntax im Hintergrund abhängen. Weitere Informationen finden Sie im Webkit-Blog und unter dem Link unten.

Beispiel

Bildmaske:

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

Beispiel

Verlaufsmaske:

.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 -strich

Ein Nachteil von CSS-Rahmen besteht darin, dass sie nur für rechteckige Elemente verwendet werden können. -webkit-text-Stroke kann Rahmen zum Text hinzufügen. Es kann nicht nur die Breite des Textrandes, sondern auch seine Farbe festlegen. Darüber hinaus können Sie mit dem Attribut „Farbe: transparent“ auch hohle Schriftarten erstellen!

Beispiel

Legen Sie einen 2 Pixel breiten blauen Rahmen für alle 4a249f0d628e2318394fd9b75b4636b1 fest:

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

Eine weitere Funktion besteht darin, einen 1 Pixel breiten transparenten Rahmen festzulegen, der den Text glatter machen kann:

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

Rote Hohlschrift erstellen:

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

-webkit-nbsp-mode

Zeilenumbrüche können möglich sein kann manchmal knifflig sein: Manchmal möchte man, dass der Text an der richtigen Stelle umbricht (anstatt umzubrechen), und manchmal nicht. Eine Eigenschaft, die dies steuert, ist -webkit-nbsp-mode, mit der Sie das Verhalten von Leerzeichen ändern können, sodass Text an der Stelle, an der er verwendet wird, umbrochen wird. Dies kann erreicht werden, indem der Wert auf Leerzeichen gesetzt wird.

-webkit-tap-highlight-color

Diese Eigenschaft ist nur auf iOS (iPhone und iPad) verfügbar. Wenn Sie auf einen durch Javascript definierten Link oder ein anklickbares Element klicken, wird dieser mit einem halbtransparenten grauen Hintergrund angezeigt. Um dieses Verhalten zurückzusetzen, können Sie -webkit-tap-highlight-color auf eine beliebige Farbe setzen.

Um diese Hervorhebung zu deaktivieren, setzen Sie den Alpha-Wert der Farbe auf 0.

Beispiel

Stellen Sie die Hervorhebungsfarbe auf 50 % transparentes Rot ein:

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

Browserunterstützung: Nur iOS (iPhone und iPad).

Erweitert Lesen: Safari Developer Library

Zoom: Zurücksetzen

Im Allgemeinen ist Zoom ein IE-spezifisches Attribut. Aber auch Webkit hat damit begonnen, es zu unterstützen, und mit dem Wert „Reset“ kann Webkit gute Ergebnisse erzielen (interessanterweise unterstützt der IE diesen Wert nicht). Damit können Sie das normale Zoomverhalten im Browser zurücksetzen. Wenn ein Element als zoom:reset deklariert ist, werden andere Elemente auf der Seite vergrößert, wenn der Benutzer die Seite vergrößert.

Hinweis: Tatsächlich verwenden wir häufig -webkit-text-size-adjust:none; wenn Sie die erzwungene Schriftgröße von Chrome deaktivieren. Der Unterschied besteht darin, dass das Element dieses Attribut festlegt Der darin enthaltene Text wird nicht vergrößert/verkleinert, aber andere Elemente auf der Seite ändern sich – Shenfei

-webkit-margin-collapse

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

最常见的例子就是两个相邻的e388a4556c0f65e1904146cc1a846bee元素会共享他们的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, 定义每次递增的速度变化。

   

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung WebKit-spezifischer Eigenschaften einiger versteckter erweiterter Eigenschaften in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!