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 laster du opp Jekyll til Github Page

Vi har diskutert hvordan du konfigurerer en Jekyll-blogg lokalt på datamaskinen vår, lager et utkast, og administrer flere utkast med bruk av et plugin i de forrige innleggene. Nå er vi klare til å distribuere bloggen til den elektroniske serveren, slik at verden ser hvor fantastisk bloggen vår er.Impl

(Tekniske og design tips)

5 Nyttige verktøy for online gruppestudie

På et tidspunkt når du studerer, er du bundet til å løpe inn i noen gruppearbeid . Ja, dette betyr at du kan jobbe med andre. Noen ganger er det vanskelig nok å kommunisere med jevnaldrende, men å ha de riktige verktøyene når man arbeider med gruppearbeid kan hjelpe mye.I dagens digitale tidsalder har nettbasert kommunikasjon blitt den andre naturen til de fleste av oss, og dette betyr at nettbasert gruppearbeid også kommer veldig naturlig. Enten d

(Tekniske og design tips)