CSS => Aangepaste eigenschappen (variabelen)

Invoering

Met CSS-variabelen kunnen auteurs herbruikbare waarden maken die in een CSS-document kunnen worden gebruikt.

Het is bijvoorbeeld gebruikelijk in CSS om een enkele kleur in een document opnieuw te gebruiken. Voorafgaand aan CSS-variabelen zou dit betekenen dat meerdere keren in een document dezelfde kleurwaarde moest worden hergebruikt. Met CSS-variabelen kan de kleurwaarde worden toegewezen aan een variabele en naar meerdere plaatsen worden verwezen. Dit maakt het wijzigen van waarden eenvoudiger en semantischer dan het gebruik van traditionele CSS-waarden.

Syntaxis

: root {} / * pseudoklasse die zorgt voor een meer globale definitie van variabelen * /
--variable-name: waarde ; / * definieer variabele * /
var (- variabele-naam, standaardwaarde ) / * gebruik gedefinieerde variabele met standaardwaarde fallback * /

Opmerkingen

CSS-variabelen worden momenteel beschouwd als een experimentele technologie.

BROWSERONDERSTEUNING / COMPATIBILITEIT

Firefox: versie 31 + (standaard ingeschakeld)

Meer info van Mozilla

Chrome: versie 49 + (standaard ingeschakeld) .

"Deze functie kan worden ingeschakeld in Chrome versie 48 voor testen door de experimental Web Platform functie in te schakelen. Voer chrome://flags/ in uw Chrome-adresbalk in om toegang te krijgen tot deze instelling."

IE: niet ondersteund.

Edge: in ontwikkeling

Safari: versie 9.1+

Variabele kleur

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
  border: 1px solid var(--red);
}

Variabele afmetingen

:root {
  --W200: 200px;
  --W10: 10px;
}
.Bx2 {
  width: var(--W200);
  height: var(--W200);
  margin: var(--W10);
}

Variabele Cascading

CSS-variabelen trapsgewijs op dezelfde manier als andere eigenschappen, en kunnen veilig worden aangepast.

U kunt variabelen meerdere keren definiëren en alleen de definitie met de hoogste specificiteit is van toepassing op het geselecteerde element.

Uitgaande van deze HTML:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

We kunnen deze CSS schrijven:

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

En krijg dit resultaat:

Geldig / Invaliden

Naamgeving Bij het benoemen van CSS-variabelen bevat het alleen letters en streepjes, net als andere CSS-eigenschappen (bijvoorbeeld: regelhoogte, -moz-box-sizing), maar het moet beginnen met dubbele streepjes (-)

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

CSS-variabelen zijn hoofdlettergevoelig.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Leeg versus spatie

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

aaneenschakelingen

    /* Invalid - CSS doesn't support concatenation*/
    .logo{
        --logo-url: 'logo';
        background: url('assets/img/' var(--logo-url) '.png');
    }

    /* Invalid - CSS bug */
    .logo{
        --logo-url: 'assets/img/logo.png';
        background: url(var(--logo-url));
    }

    /* Valid */
    .logo{
        --logo-url: url('assets/img/logo.png');
        background: var(--logo-url);
    }

Wees voorzichtig met het gebruik van eenheden

    /* Invalid */
    --width: 10;
    width: var(--width)px;

    /* Valid */
    --width: 10px;
    width: var(--width);

    /* Valid */
    --width: 10;
    width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
    width: calc(1em * var(--width));

Met mediavragen

U kunt variabelen in mediaquery's opnieuw instellen en die nieuwe waarden laten overlopen, waar ze ook worden gebruikt, iets dat niet mogelijk is met variabelen van de voorprocessor.

Hier wijzigt een mediaquery de variabelen die worden gebruikt om een zeer eenvoudig raster in te stellen:

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

U kunt proberen het formaat van het venster in deze CodePen-demo te wijzigen

Hier is een geanimeerde screenshot van het formaat wijzigen in actie:

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
Aangepaste eigenschappen (variabelen)

Zoeken…