Ein Blick in: CSS4 Document Rule

Viele Websites haben viele Seiten, aber alle diese Seiten werden üblicherweise mit nur einem Stylesheet formatiert. Es empfiehlt sich, nur ein Stylesheet zu verwenden, um HTTP-Anforderungen zu minimieren, damit die Seiten in einem Browser schneller geladen werden können.

Es wird jedoch eine Reihe von Stilregeln geben, die im Stylesheet enthalten sind und für einige Seiten nicht benötigt werden. Wäre es also nicht großartig, wenn wir nur für bestimmte Seiten eine Reihe von Stilregeln anwenden könnten, ohne sie auf ein Stylesheet zu beschränken?

Diese Idee wird mit der neuen vorgeschlagenen CSS At-Regel @document . Diese Regel wurde ursprünglich als Teil von CSS3 vorgeschlagen, wurde aber wegen verschiedener Probleme verschoben und würde wahrscheinlich in CSS Level 4 enthalten sein.

Mal sehen, wie es funktioniert, sollen wir?

Grundlegende Verwendung

@document ermöglicht es uns, Style-Regeln nur für bestimmte Seiten @document . Wie im Vorschlag angegeben, ist es in erster Linie für Benutzer Stylesheet ausgelegt. Benutzer können also ihre (Lieblings-) Websites anpassen:

 @document domain ("facebook.com") {body {Hintergrundfarbe: gelb; } a {Farbe: rot; } img {Rahmenradius: 100%; }} @document domain ("twitter.com") {body {Hintergrundfarbe: rot; } a {Farbe: Rosa; }} 

Sie können UserStyles.org für einige großartige Beispiele von Benutzer-Stylesheets besuchen.

Wir als @document können @document auch verwenden, um die Stile auf unserer Website zu steuern. Nehmen wir an, wir möchten, dass unsere Style-Regeln auf einer bestimmten Seite unserer Website angewendet werden. Um dies zu erreichen, können wir die @document wie @document mit @document kapseln:

 @document url ("https://www.hongkiat.com/blog/about-us/") {h1 {font-size: 50em; Farbe grün; } p {Farbe: rot; } a {Farbe: blau; }} 

Der Unterschied zwischen domain() (vom ersten Beispiel) und url() besteht darin, dass domain() alle Seiten betrifft, die in der angegebenen Domäne gehostet werden, während url() die style-Regeln nur auf die angegebene URL anwendet; Die anderen URLs (oder Seiten) sind daher nicht betroffen.

Sie können url-prefix(), um Stilregeln für eine URL css, die beispielsweise mit css beginnt.

 @document url-prefix ("https://www.hongkiat.com/blog/category/") {h2 {Schriftfamilie: "Georgia"; } div {Hintergrundfarbe: blau; Farbe: #fff; }} 

Mit der Funktion regexp() können wir tiefer in den Regulären Ausdruck (Regex) einsteigen. Das folgende Beispiel stammt von W3C und der Regex stimmt mit der URL überein, die mit http://www.w3.org/TR/ beginnt, gefolgt von 4 numerischen Ziffern und endend mit 8 numerischen Ziffern.

 @document regexp ("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {body {transform: rotate (90deg) ; }} 

Fazit

In Ordnung, wir haben einige Verwendungsmöglichkeiten der @document Regel gesehen. Aber wie bereits erwähnt, ist es momentan für CSS4 gesperrt, und Firefox ist der einzige Browser, der es mit dem @-moz-document implementiert hat. Nichtsdestotrotz werden wir die Entwicklung der @document Regel im @document und sehen, wie es in Zukunft weitergeht.

10 nützlichsten Atom-Pakete für Web-Entwickler

Hast du Atom probiert? Obwohl es ziemlich neu ist, haben sich viele in Atom verliebt, einen Texteditor von GitHub, der viele Vorteile bietet und vor allem kostenlos ist. Atom verfügt über einige integrierte Pakete, z. B. Integration mit Git und Tree-View. Für die Zwecke der Entwicklung werden Sie jedoch auf jeden Fall andere Pakete benötigen.In

(Tech- und Design-Tipps)

Firefox Send - Diese Datei wird sich nach dem Download selbst zerstören

Die Online-Freigabe Ihrer Dateien ist heutzutage ziemlich riskant, da Hacker diese Dateien stehlen oder duplizieren können, ohne dass jemand davon weiß.Dank dieser Ängste haben viele Online-File-Sharing-Systeme damit begonnen, die Dateien vorsichtshalber zu verschlüsseln, um zu verhindern, dass Hacker leicht auf die fraglichen Dateien zugreifen können.Vor

(Tech- und Design-Tipps)