En titt inn i: CSS4 Dokumentregel

Mange nettsteder har mange sider, men alle sidene er vanligvis utformet med bare ett stilark. Å betjene bare ett stilark er en god praksis for å minimere HTTP-forespørsler slik at sidene lastes raskere i en nettleser.

Det vil imidlertid være en rekke stilregler som finnes i stilarket som er unødvendige for noen sider. Så ville det ikke vært bra hvis vi bare kunne bruke et sett med stilregler bare for bestemte sider, samtidig som de fortsatt holder det til ett stilark?

Denne ideen kunne gjøres mulig med den nye foreslåtte standarden CSS At-regelen kalt @document . Denne regelen ble først foreslått som en del av CSS3, men på grunn av flere problemer ble den utsatt og vil sannsynligvis bli inkludert i CSS Level 4.

La oss se hvordan det fungerer, skal vi?

Grunnleggende bruk

@document gir oss mulighet til å @document for bare bestemte sider. Som nevnt i forslaget, er det primært utformet for User Stylesheet. Så brukerne kan gjøre følgende for å tilpasse sine (favoritt) nettsteder:

 @document domain ("facebook.com") {kropp {bakgrunnsfarger: gul; } en {farge: rød; } img {border-radius: 100%; }} @document domain ("twitter.com") {body {bakgrunnsfarger: rødt; } en {farge: rosa; }} 

Du kan besøke UserStyles.org for noen gode eksempler på bruker stilark.

Vi, som @document, kan også bruke @document til å kontrollere stilene på hele nettstedet vårt. La oss si at vi vil at våre stilregler skal brukes på en bestemt side på vår nettside. For å gjøre det kan vi inkapslere @document med @document slik:

 @document url ("https://www.hongkiat.com/blog/about-us/") {h1 {font-size: 50em; farge: grønn; } p {farge: rød; } en {farge: blå; }} 

Forskjellen mellom domain() (fra det første eksempelet) og url() er at domain() vil påvirke alle sidene som er vert på det angitte domenet, mens url() bare vil anvende stilreglene til den angitte nettadressen; De andre nettadressene (eller sidene) er dermed upåvirket.

Du kan bruke url-prefix() til å angi stilregler til en nettadresse som begynner med, for eksempel css .

 @document url-prefiks ("https://www.hongkiat.com/blog/category/") {h2 {font-family: "Georgia"; } div {bakgrunnsfarge: blå; farge: #fff; }} 

Ved hjelp av regexp() -funksjonen kan vi gå mer grundig med Regular Expression (Regex). Følgende eksempel er hentet fra W3C, og Regex matcher nettadressen som begynner med http://www.w3.org/TR/, etterfulgt av 4 numeriske tall og slutter med 8 numeriske siffer.

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

Konklusjon

Ok, vi har sett noen @document . Men som nevnt, er det for øyeblikket på vent for CSS4, og Firefox er den eneste nettleseren som har implementert den med @-moz-document prefiks. Likevel vil vi holde tabs på utviklingen av @document regelen, og se hvordan det går i fremtiden.

Slik bruker du Instagram-filtre på webbilder

Mange elsker å bruke Instagram og filtre som følger med appen, for å gjøre bildene mer interessante og vakre. Så langt er bruken av disse filtrene begrenset til bruk inne i appen. Hva om du vil bruke Instagram-filtre på webbilder, utenfor appen, som bilder du vil sette opp i din personlige blogg eller nettside?Vel,

(Tekniske og design tips)

20 nettsteder med uortodokse geometrielementer for din inspirasjon

Selv om argumentet om at de fleste Internett-brukere i dag alltid er "på farten", og som er mer opptatt av å få ting gjort på den raskeste og enkleste måten, er ganske sannsynlig, vil "kreative" neppe være enige om ideen om å forandre unikt og estetikk for forutsigbarhet.Derfor tar moderne designere en 45 graders sving når det gjelder flat design, og improviserer med unike vinkler og former . I sted

(Tekniske og design tips)