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.

OS X Lion: 10 Altre nuove funzionalità + scorciatoie da conoscere

L'ultimo sistema operativo di Apple per Mac, 10.7 o meglio conosciuto come OS X Lion è stato ufficialmente lanciato il 20 luglio 2011. Ma gli sviluppatori, incluso me stesso, hanno avuto una prima esperienza grazie ad Apple Developers Program.Secondo Apple, il nuovo sistema operativo da $ 29, 99 viene fornito con oltre 250 nuove funzionalità, tra cui alcune di rilievo come Mission Control, Auto Save, Launch Pad, tutte le nuove app di posta e alcune altre.O

(Consigli tecnici e di design)

80 strumenti Twitter per quasi tutto

Twitter è il caos, ma nel bel mezzo di questo bel casino ci sono un sacco di dati che, se riesci a capire, puoi manipolarli per tuo uso personale. Per fare ciò, hai bisogno del giusto set di strumenti. La buona notizia è che c'è un'abbondanza di strumenti, sia gratuiti che a pagamento, che possono aiutarti a fare cose come ordinare i tuoi follower, dirti quando è meglio twittare (per una maggiore esposizione), scoprire chi non ti ha seguito e Di Più.Qui i

(Consigli tecnici e di design)