Uno sguardo in: Regola del documento CSS4

Molti siti Web hanno molte pagine, ma tutte quelle pagine sono comunemente in stile con un solo foglio di stile. Servire solo un foglio di stile è una buona pratica per ridurre al minimo le richieste HTTP consentendo alle pagine di caricarsi più velocemente in un browser.

Tuttavia, ci saranno un sacco di regole di stile contenute nel foglio di stile che non sono necessarie per alcune pagine. Quindi non sarebbe bello se potessimo applicare una serie di regole di stile solo per determinate pagine, pur continuando a tenerlo in un unico foglio di stile?

Questa idea sarebbe resa possibile con la nuova norma standard At-rule chiamata @document . Questa regola è stata inizialmente proposta come parte del CSS3 ma, a causa di diversi problemi, è stata posticipata e verosimilmente inclusa nel Livello 4 del CSS.

Vediamo come funziona, vero?

Uso di base

@document ci consente di designare regole di stile solo per pagine specifiche. Come indicato nella proposta, è progettato principalmente per il foglio di stile utente. Quindi, gli utenti possono fare quanto segue per personalizzare i loro siti web (preferiti):

 dominio @document ("facebook.com") {body {background-color: yellow; } a {color: red; } img {border-radius: 100%; }} Dominio @document ("twitter.com") {body {background-color: red; } a {color: pink; }} 

Puoi visitare UserStyles.org per alcuni fantastici esempi di fogli di stile utente.

Noi, come autori web, possiamo anche utilizzare @document per controllare gli stili sul nostro sito web. Diciamo che vogliamo che le nostre regole di stile siano applicate su una particolare pagina sul nostro sito web. Per fare ciò, possiamo incapsulare le regole di stile con @document modo:

 @document url ("https://www.hongkiat.com/blog/about-us/") {h1 {font-size: 50em; colore: verde; } p {color: red; } a {color: blue; }} 

La differenza tra domain() (dal primo esempio) e url() è che domain() avrà effetto su tutte le pagine che sono ospitate sul dominio specificato, mentre url() applicherà solo le regole di stile all'URL specificato; gli altri URL (o pagine) non sono quindi interessati.

Puoi usare url-prefix() per designare le regole di stile in un URL che inizia con, per esempio, css .

 @document url-prefix ("https://www.hongkiat.com/blog/category/") {h2 {font-family: "Georgia"; } div {background-color: blue; colore: #fff; }} 

Usando la funzione regexp(), possiamo andare più in profondità con Regular Expression (Regex). Il seguente esempio è derivato da W3C e il Regex corrisponde all'URL che inizia con http://www.w3.org/TR/, seguito da 4 cifre numeriche e che termina con 8 cifre numeriche.

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

Conclusione

Bene, abbiamo visto alcune possibilità di utilizzo della regola @document . Ma come detto, è attualmente in attesa per CSS4 e Firefox è l'unico browser che lo ha implementato con il prefisso @-moz-document . Ciononostante, @document sotto controllo lo sviluppo della regola @document e vedremo come andrà in futuro.

20 font Bold & Chunky gratuiti per ravvivare i tuoi disegni

Ci sono alcuni font must-have che diventano essenziali per i tuoi progetti, e i font in grassetto sono uno di questi tipi. I font grossi e pesanti aggiungono molta sostanza al tuo design e sembrano esteticamente piacevoli .In questo post abbiamo creato un'interessante raccolta di font gratuiti in grassetto e grossi che possono essere utilizzati per titoli, titoli o altri aspetti del tuo design

(Consigli tecnici e di design)

Come raccontare storie che altri vogliono condividere

Lo storytelling è un fattore chiave nel design di successo e nella creazione di contenuti in generale. Senza raccontare una sorta di storia, non c'è modo di entusiasmare le persone sui contenuti che devi condividere. Molte volte, tuttavia, le persone perderanno interesse per una storia per una serie di motivi, che copriremo nel post di oggi.D

(Consigli tecnici e di design)