de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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 wenig bekannte, super effektive Tipps, um Ihren WordPress Blog zu sichern

10 wenig bekannte, super effektive Tipps, um Ihren WordPress Blog zu sichern

Einen Blog gehackt zu bekommen und jahrelang jahrelang Blogarbeit über Nacht zu verlieren, ist eine traurige Realität, die Menschen tatsächlich durchgemacht haben. Tatsächlich zeigt die Forschung, dass jeden Tag 37.000 Webseiten gehackt werden, und mit WordPress, das ungefähr 25, 4% aller Websites versorgt, können Sie sicher sein, dass jede Menge WordPress-Blogs jeden Tag gehackt werden.WordP

(Tech- und Design-Tipps)

Die heißesten Web-Anwendungen des Monats - Juli

Die heißesten Web-Anwendungen des Monats - Juli

Hier sind wir wieder! In diesem Monat möchten wir Ihnen eine ganze Reihe toller Web-Apps zur Verfügung stellen, die Ihren Arbeitsablauf auf unterschiedlichste Weise verbessern werden, von Online-Videobearbeitung über Rapid Prototyping, Ruby on Rails lernen und mehr - Sie nennen es hab 'es kapiert.Na

(Tech- und Design-Tipps)