nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Een kijkje in: CSS4-documentregel

Veel websites hebben veel pagina's, maar al die pagina's zijn meestal opgemaakt met slechts één stylesheet. Het serveren van slechts één stylesheet is een goede gewoonte om HTTP-verzoeken te minimaliseren, waardoor de pagina's sneller in een browser kunnen worden geladen.

Er zijn echter een aantal stijlregels in het stylesheet die voor sommige pagina's niet nodig zijn. Zou het niet geweldig zijn als we een aantal stijlregels alleen voor bepaalde pagina's zouden kunnen toepassen terwijl we deze nog steeds naar één stylesheet zouden houden?

Dit idee zou mogelijk worden gemaakt met de nieuwe voorgestelde standaard CSS At-rule genaamd @document . Deze regel werd aanvankelijk voorgesteld als onderdeel van CSS3 maar vanwege verschillende problemen werd deze regel uitgesteld en zou waarschijnlijk worden opgenomen in CSS Level 4.

Laten we kijken hoe het werkt, zullen we?

Standaard gebruik

@document stelt ons in staat stijlregels aan te wijzen voor alleen specifieke pagina's. Zoals vermeld in het voorstel, is het in de eerste plaats bedoeld voor gebruikersstijlbladen. Gebruikers kunnen dus het volgende doen om hun (favoriete) websites aan te passen:

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

U kunt UserStyles.org bezoeken voor enkele geweldige voorbeelden van gebruikersstijlen.

Wij, als @document, kunnen ook @document gebruiken om de stijlen op onze website te beheren. Laten we zeggen dat we onze stijlregels op een bepaalde pagina op onze website willen toepassen. Om dat te doen, kunnen we de stijlregels inkapselen met @document zoals zo:

 @document url ("https://www.hongkiat.com/blog/about-us/") {h1 {font-size: 50em; kleur groen; } p {kleur: rood; } a {kleur: blauw; }} 

Het verschil tussen domain() (uit het eerste voorbeeld) en url() is dat domain() van invloed is op alle pagina's die worden gehost op het opgegeven domein, terwijl url() alleen de stijlregels op de opgegeven URL toepast; de andere URL's (of pagina's) worden dus niet beïnvloed.

U kunt url-prefix() om stijlregels aan te wijzen aan een URL die begint met, bijvoorbeeld, css .

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

Met de functie regexp() kunnen we dieper ingaan op Reguliere expressie (Regex). Het volgende voorbeeld is afgeleid van W3C en de Regex komt overeen met de URL die begint met http://www.w3.org/TR/, gevolgd door 4 cijfers en eindigt met 8 cijfers.

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

Conclusie

Oke, we hebben enkele gebruiksmogelijkheden van de regel @document . Maar zoals vermeld, is het momenteel geblokkeerd voor CSS4 en Firefox is de enige browser die het heeft geïmplementeerd met het voorvoegsel @-moz-document . Desalniettemin houden we de ontwikkeling van de regel @document en kijken we hoe deze in de toekomst zal worden toegepast.

Hoe het verborgen schaakspel op FB Messenger te spelen

Hoe het verborgen schaakspel op FB Messenger te spelen

Wist je dat je Schaken op Facebook kunt spelen? Nou, op Facebook Messenger om precies te zijn. Het is een verborgen commando dat kan worden getriggerd met @fbchess, maar wees gewaarschuwd dat het een erg saaie manier is om een online schaakspel te spelen (maar wie weet ben je een fan).Om te beginnen, open een chatgesprek met een vriend, bij voorkeur iemand die Schaak speelt natuurlijk

(Technische en ontwerptips)

Ontdek Open Source Laravel-projecten met Open Laravel

Ontdek Open Source Laravel-projecten met Open Laravel

Webontwikkelaars houden van frameworks omdat ze tijd besparen en de codekwaliteit verbeteren. Er zijn veel PHP-frameworks maar Laravel is veruit de beste.Als je net Laravel binnengaat, kun je veel leren door de code van anderen te bestuderen . Dat is waar Open Laravel van pas komt.De site werkt als een gedecentraliseerde repository die de beste opensource Laravel-projecten van over de hele wereld samenstelt

(Technische en ontwerptips)