Creating CSS Global Variables : Stylesheet theme management -


this question has answer here:

is there way set global variables in css such as:

@color1 = #fff; @color2 = #b00;  h1 {   color:@color1;   background:@color2; }

latest update: 26/05/2017

css variables (custom properties) have arrived!

another year browser. edge has joined mozilla , google supporting great feature.

preprocessor "not" required!

there lot of repetition in css. single color may used in several places.

for css declarations, possible declare higher in cascade , let css inheritance solve problem naturally.

for non-trivial projects, not possible. declaring variable on :root pseudo-element, css author can halt instances of repetition using variable.

how works

set variable @ top of stylesheet:

css

create root class:

:root { }

create variable:

:root {     --bgd: #333; }

add names variable followed value:

(names can string choose.)

:root {   --red: #b00;   --blue: #00b;   --fullwidth: 100%; }

set variables anywhere in css document:

h1 {   color: var(--red); } #mytext {   color: var(--blue);   width: var(--fullwidth); }

browser support / compatibility

![supported browsers

firefox: version 31+ (enabled default)

(leading way usual.) more info mozilla

chrome: version 49+ (enabled default).

"this feature can enabled in chrome version 48 testing enabling experimental web platform feature. enter chrome://flags/ in chrome address bar access setting."

safari/ios safari: version 9.1/9.3 (enabled default).

opera: version 39+ (enabled default).

android: version 52+ (enabled default).

ie: it's never going happen.

edge: version 15+ (enabled default).

css custom properties landed in windows insider preview build 14986

w3c spec

full specification upcoming css variables

read more

try out

a fiddle , snippet attached below testing:

(it work supported browsers.)

demo fiddle

:root {    --red: #b00;    --blue: #4679bd;    --grey: #ddd;    --w200: 200px;    --lft: left;  }  .bx1,  .bx2,  .bx3,  .bx4 {    float: var(--lft);    width: var(--w200);    height: var(--w200);    margin: 10px;    padding: 10px;    border: 1px solid var(--red);  }  .bx1 {    color: var(--red);    background: var(--grey);  }  .bx2 {    color: var(--grey);    background: black;  }  .bx3 {    color: var(--grey);    background: var(--blue);  }  .bx4 {    color: var(--grey);    background: var(--red);  }
<p>if see 4 square boxes variables working expected.</p>    <div class="bx1">i should red text on grey background.</div>  <div class="bx2">i should grey text on black background.</div>  <div class="bx3">i should grey text on blue background.</div>  <div class="bx4">i should grey text on red background.</div>


Comments

Post a Comment

Popular posts from this blog

monitor web browser programmatically in Android? -

i've got tricky question here. need users make payment bank (namely barclaycard) in uk. so, have https url , add parameters (such amount pay, order reference, etc) url, start http connection intent.actionview, redirect user browser can enter credit card details on bank's webpage , make payment our account successfully. far ? the code use below (i changed values privacy reasons) problem is, need app when user has completed/failed/cancelled payment. barclaycardautomatically redirects particular url when payment has succeeded, 1 if failed. there no way of knowing when barclaycard payment has succeeded go android app somehow ? button cardbutton = (button) findviewbyid(r.id.card_button); cardbutton.setonclicklistener(new view.onclicklistener() { @override public void onclick(view arg0) { string prehashstring = new string(); string prohashstring = new string(); string shapassphrase = new string(); shapassphrase = "gsvth£h70zkh...
Read more

Shrink a YouTube video to responsive width -

i have youtube video embedded on our website , when shrink screen tablet or phone sizes stops shrinking @ around 560px in width. standard youtube videos or there can add code make go smaller? you can make youtube videos responsive css. wrap iframe in div class of "videowrapper" , apply following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } the .videowrapper div should inside responsive element. padding on .videowrapper necessary keep video collapsing. may have tweak numbers depending upon layout.
Read more

wpf - PdfWriter.GetInstance throws System.NullReferenceException -

i'm trying create pdf document using itextsharp 5.3.4 using following document document = new document(); filestream stm = new filestream(filename, filemode.create); pdfwriter writer = pdfwriter.getinstance(document, stm); i'm getting system.nullreferenceexception following stack trace: system.nullreferenceexception occurred hresult=-2147467261 message=la référence d'objet n'est pas définie à une instance d'un objet. source=itextsharp stacktrace: à itextsharp.text.version.getinstance() innerexception: i've verified neither document nor stm null, , if select "continue" in vs12 document created - exception thrown. updated itextsharp 5.4.0 , it's still occurring. can't find information on anywhere - got ideas? make sure not catching exceptions. nullreferenceexception can 1 caught , handled inside itextsharp, don't care it. fact can continue supports theory. change following setting verify: debug -> exceptions ...
Read more