Deel 9: The cascade

Web Design

Overerving / inheritance

The cascade

Overerving / inheritance

<div class="my-parent">
  <div class="my-child"></div>
</div>
.my-parent {
  color: red;
}

/* Dit element zal de kleur overerven */
.my-child {
  color: inherit;
}

Dit doen browsers automatisch!

Overerving / inheritance

<div class="my-parent">
  <div class="my-child"></div>
</div>
.my-parent {
  color: red;
}

/* Dit element zal de kleur overerven */
.my-child {} 
<ul style="color: red;">
  <li>ja</li>
  <li>
    <ul>
      <li>ja</li>
      <li>ja</li>
    </ul>
  </li>
  <li>ja</li>
  <li>
    <ul>
      <li>ja</li>
      <li>ja</li>
      <li>
      	<ul>
          <li>ja</li>
          <li>ja</li>
          <li>ja</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

ja

 

 

ja

ja

 

 

ja

 

 

ja

ja

 

 

ja

ja

ja

<ul style="color: red;">
  <li>ja</li>
  <li>
    <ul style="color: blue;">
      <li>ja</li>
      <li>ja</li>
    </ul>
  </li>
  <li>ja</li>
  <li>
    <ul>
      <li>ja</li>
      <li>ja</li>
      <li>
      	<ul>
          <li>ja</li>
          <li>ja</li>
          <li>ja</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

ja

 

 

ja

ja

 

 

ja

 

 

ja

ja

 

 

ja

ja

ja

<ul style="color: red;">
  <li>ja</li>
  <li>
    <ul style="color: blue;">
      <li>ja</li>
      <li>ja</li>
    </ul>
  </li>
  <li>ja</li>
  <li>
    <ul>
      <li>ja</li>
      <li>ja</li>
      <li>
      	<ul style="color: black;">
          <li>ja</li>
          <li>ja</li>
          <li>ja</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

ja

 

 

ja

ja

 

 

ja

 

 

ja

ja

 

 

ja

ja

ja

<ul style="color: pink;">
  <li>ja</li>
  <li>
    <ul style="color: blue;">
      <li>ja</li>
      <li>ja</li>
    </ul>
  </li>
  <li>ja</li>
  <li>
    <ul>
      <li>ja</li>
      <li>ja</li>
      <li>
      	<ul style="color: black;">
          <li>ja</li>
          <li>ja</li>
          <li>ja</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

ja

 

 

ja

ja

 

 

ja

 

 

ja

ja

 

 

ja

ja

ja

<ul style="color: pink;">
  <li>ja</li>
  <li>
    <ul style="color: blue;">
      <li style="color: red;">ja</li>
      <li>ja</li>
    </ul>
  </li>
  <li>ja</li>
  <li>
    <ul>
      <li>ja</li>
      <li>ja</li>
      <li>
      	<ul style="color: black;">
          <li>ja</li>
          <li>ja</li>
          <li>ja</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

ja

 

 

ja

ja

 

 

ja

 

 

ja

ja

 

 

ja

ja

ja

Overerving / inheritance

body {
  color: red;
}

div {
  color: red;
}

p {
  color: red;
}

span {
  color: red;
}

👎

body {
  color: red;
}

👍

Overerving / inheritence

Deze properties doen aan overerving

color, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, text-shadow, word break

Overerving / inheritence

Deze properties doen NIET aan overerving:

Al de andere properties

Bijvoorbeeld als je een border toevoegt op <body>, dan zal niet ieder element binnen de body een border krijgen.

Volgorde van properties

The cascade

Volgorde van properties

Indien 2 CSS declaraties dezelfde property aanpassen, dan wint de laatst gedefinieerde.

p {
  color: red;
  color: blue;
  color: green;
}

De paragraaf zal groen zijn

Volgorde van properties

p {
  color: red;
  color: blue;
  color: green;
}

...

p {
  color: blue;
  color: orange;
}

De paragraaf zal oranje zijn

Volgorde van properties

p {
  color: red;
}

De paragraaf zal groen zijn

style-first.css

p {
  color: green;
}

style-second.css

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <link rel="stylesheet" href="css/style-first.css">
        <link rel="stylesheet" href="css/style-second.css">
    </head>
...
<div class="my-parent">
  <p class="my-child"></p>
</div>
.my-parent {
  color: red;
}

.my-child {}

Welke kleur heeft de paragraaf?

<div class="my-parent">
  <p class="my-child"></p>
</div>
.my-parent {
  color: red;
}

.my-child {
  color: blue;
}

Welke kleur heeft de paragraaf?

Welke kleur heeft de paragraaf?

<div class="my-parent">
  <p class="my-child"></p>
</div>
.my-parent {
  color: red;
}

.my-child {
  color: blue;
  color: purple;
}

Welke kleur heeft de paragraaf?

<div class="my-parent">
  <p class="my-child"></p>
</div>
.my-child {
  color: blue;
  color: purple;
} 

.my-parent {
  color: red;
}
<div class="my-parent">
  <p class="my-child"></p>
</div>
.my-child {
  color: blue;
  color: purple;
}

Volgorde

overerving

Volgorde van properties

Specificiteit

The cascade

Specificiteit

De soort selector die gebruikt wordt binnen CSS, bepaald mee het gewicht van de properties.

Specificiteit

De soorten selectors:

  • Universele selector  
  • Type selectors
  • Class selectors
  • Attribute selectors
  • ID-selectors

0 - 0 - 0

0 - 0 - 1

0 - 1 - 0

0 - 1 - 0

1 - 0 - 0

Specificiteit

Specificiteit

Universele selector

0 - 0 - 0

* {
  color: blue;
}

Specificiteit

Type selector

0 - 0 - 1

p {
  color: blue;
}

Specificiteit

Class selector

0 - 1 - 0

.my-text {
  color: blue;
}

Attribute selector

0 - 1 - 0

a[target="_blank"] {
  color: blue;
}

Specificiteit

ID selector

1 - 0 - 0

#my-text {
  color: blue;
}

Specificiteit

De selector die gebruikt wordt binnen CSS bepaald mee het gewicht van de properties.

<div class="my-div">
  <p class="my-text">tekst</p>
</div>
* {
  color: blue;
}

p {
  color: green;
}

0 - 0 - 0

0 - 0 - 1

Specificiteit

De selector die gebruikt wordt binnen CSS bepaald mee het gewicht van de properties.

<div class="my-div">
  <p class="my-text">tekst</p>
</div>
* {
  color: blue;
}

p {
  color: green;
}

.my-text {
  color: red;
}

0 - 0 - 0

0 - 0 - 1

0 - 1 - 0

Specificiteit

<div class="my-div">
  <p class="my-text">tekst</p>
</div>
.my-text {
  color: red;
}

p.my-text {
  color: blue;
}

.my-div .mytext {
  color: green;
}

0 - 1 - 0

0 - 1 - 1

0 - 2 - 0

Specificiteit

<div class="my-div" id="my-div">
  <p class="my-text" id="my-text">tekst</p>
</div>
.my-div .my-text {
  color: green;
}

div.my-div p.my-text {
  color: blue;
}

#my-text {
  color: red;
}

0 - 2 - 0

0 - 2 - 2

1 - 0 - 0

Wat is de specificiteit?

* {
  color: green;
}

p#my-text {
  color: blue;
}

p#my-text.my-text {
  color: red;
}

0 - 0 - 0

1 - 0 - 1

1 - 1 - 1

Wat is de specificiteit?

#my-id .my-class #another-id {
  color: green;
}

body ul li a#my-id {
  color: blue;
}

h1, h2 {
  color: red;
}

2 - 1 - 0

1 - 0 - 4

0 - 0 - 1

Wat weegt het meest?

The cascade

Wat weegt het meest

Specificity > volgorde > overerving

Eerst kijkt een browser naar de specificity

Als de specificity hetzelfde is, wordt gekeken naar de volgorde.

Als de volgorde niet te bepalen valt (geen properties), dan wordt gekeken naar overerving. 

 

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
div {
  color: red
}

Welke kleur heeft p?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
div {
  border: 1px solid blue;
}

Heeft p een border?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p {
  color: blue;
}

div {
  color: red;
}

Welke kleur heeft p?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p {
  color: blue;
}

div.my-div {
  color: red;
}

Welke kleur heeft p?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p {
  color: blue;
}

div#my-div {
  color: red;
}

Welke kleur heeft p?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p {
  color: blue;
}

.my-text {
  color: red;
}

Welke kleur heeft p?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p.my-text {
  color: blue;
}

div .my-text {
  color: red;
}

Welke kleur heeft p?

Wat weegt het meest

<section> 
  <div class="my-div" id="my-div">
    <p class="my-text" id="my-text">tekst</p>
  </div>
<section>
p#my-text {
  color: blue;
}

div .my-text {
  color: red;
}

Welke kleur heeft p?

Wat weegt het meest

Simplifying complexity

The cascade

Simplifying complexity

Specificiteit kan complex zijn, zeker in combinatie met overerving om hier helder een overzicht in te houden in CSS.

 

Om dit een pak meer simpel te maken zijn hier enkele gebruikelijke good practices. 

Simplifying complexity

Gebruik enkel de volgende selectors in CSS:

  • Universele selector  
  • Type selectors
  • Class selectors
  • Attribute selectors

0 - 0 - 0

0 - 0 - 1

0 - 1 - 0

0 - 1 - 0

Simplifying complexity

Gebruik dus geen ID selectors in CSS. Want die kan je onmogelijk overschrijven met classes.

Simplifying complexity

Gebruik een logische volgorde van hoe je de selectors na elkaar schrijft in CSS:

div {...}

body {...}

* {...}

p {...}

html {...}
* {...}

html {...}

body {...}

div {...}

p {...}

👎

👍

Simplifying complexity

Zo hoef je niet langer een onderscheid te maken tussen overerving en volgorde!

* {...}

html {...}

body {...}

div {...}

p {...}

👍

De volgorde is nu hetzelfde

als de logische overerving

Simplifying complexity

Definieer eerst type selectors, en daarna de class en attribute selectors

a[target="_blank"] {...}

a {...}

section.my-class {...}

section {...}
a {...}

a[target="_blank"] {...}

section {...}

section.my-class {...}

👎

👍

Simplifying complexity

Definieer eerst type selectors, en daarna de class en attribute selectors

a[target="_blank"] {...}

section.my-class {...}

* {...}
html {...}
body {...}
div {...}
p {...}
a {...}
a[target="_blank"] {...}

* {...}
html {...}
body {...}
div {...}
p {...}
a {...}
a[target="_blank"] {...}

.my-class {...}

.my-other-class {...}

👎

👍

Simplifying complexity

Definieer eerst type selectors, en daarna de class en attribute selectors

* {...}
html {...}
body {...}
div {...}
p {...}
a {...}
a[target="_blank"] {...}

.my-class {...}

.my-other-class {...}

👍

De volgorde is nu hetzelfde

als de specificiteit.

Web Design Deel 9: The Cascade

By Evelien Rutsaert

Made with Slides.com

Web Design Deel 9: The Cascade

Element overerving, volgorde van declaraties, selector specificiteit.

  • 235

More from Evelien Rutsaert