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.

YAMM3 - Bygg Megamenu For Bootstrap 3

Det er mange fordeler ved bruk av megamenu på en nettside. Med megamenu kan du ta full kontroll over menyen din . Nesten alle webelementer kan tildeles der. Noen gode selskaper har selv brukt megamenu på deres nettside. Amazon og Mashable for eksempel. Amazon har en bildebakgrunn i menyen, og Mashable bruker bildeminiatyr for en mer attraktiv meny.H

(Tekniske og design tips)

Opprett dokumenter i MS Office med tale ved hjelp av diktere

Stemme-til-tekst-skriving på Microsoft Office-pakken kan ha blitt en enorm forbedring. Hvordan det? Vel, Microsoft har gitt ut en ny add-on som heter Dictate som lar deg lage dokumenter i Office-pakken med bare stemmen din .Dictate er utgitt som et eksperimentelt prosjekt under Microsoft Garage-paraplyen, og er et avansert tekst-til-skriv-system som benytter Cortana's talegjenkjenningsteknologi for å identifisere talte ord.

(Tekniske og design tips)