.box pdiv > h2h2 + ph1 ~ pIm Falle eines Konflikts, greifen CSS Regeln um festzustellen, welcher Selektor mehr Gewicht hat
Das Algorithmus für die Spezifität ist ein 3-Spalten Wert aus drei Kategorien oder Gewichten: ID, CLASS, und TYPE, entsprechend den Selektorentypen (Attributen zählen wie Klassen und Pseudo-Elementen wie HTML-Elementen).
#meinDiv address {
color: blue;
}
.meindiv address {
color: cadetblue;
}
address {
color: purple;
}
#meinDiv address {
color: blue; /* Spezifität: 1,0,1 */
}
.meindiv address {
color: cadetblue; /* Spezifität: 0,1,1 */
}
address {
color: purple; /* Spezifität: 0,0,1 */
}
p {
color: blue;
}
.anderefarbe {
color: cadetblue;
}
p {
color: purple;
}
Welche Farbe bin ich?
Welche Farbe bin ich?
.bodyClass .sectionClass .parentClass p {
color: purple; /* 0-3-1 */
}
Eine Eigenschaft kann Werte aus den Eltern-Elementen erben oder einen Initialenwert haben.
Zum Beispiel color erbt standardmäßig den Wert des Eltern-Elements.
Die Eigenschaft border hat Initialwerte:
p {
border: 3px solid green;
}
Diese Zeile enthält extra markierten Text.
p {
border: 3px solid green;
}
em {
border: inherit;
}
Diese Zeile enthält extra markierten Text.
Wenn der Browser eine Eigenschaft oder einen Wert nicht versteht, wird einfach ignoriert. Das kann man sich zunutze machen um z.B. Fallbacks zu definieren. Im Beispiel unten: Die erste Deklaration ist das Fallback für Browsers, die color-mix() nicht unterstützen
div {
background: rgb(196, 92, 113);
background: color-mix(in srgb, blueviolet, darkorange);
}
Baseline identifiziert die Verfügbarkeit von Funktionen (CSS, JavaScript, API) in gängigen Browsern.
Baseline berücksichtigt die Unterstützung in folgenden Browsern:
Alles in CSS hat eine Box um sich herum. Um komplexere Layouts mit CSS zu erstellen oder Elemente miteinander auszurichten muss man verstehen wie diese Boxen funktionieren.
Es gibt zwei Kategorien von Boxen: block oder inline
Wenn eine Box eine Außenanzeige block hat, dann:
<h1> und <p> Block-Elemente.
Wenn eine Box eine Außenanzeige inline hat, dann:
Elemente wie <a>, <span> und <strong> sind Inline-Elemente.
div {
width: 300px;
height: 200px;
padding: 40px;
margin: 20px;
border: 3px solid cornflowerblue;
background-color: gold;
&.alternate {
box-sizing: border-box;
}
}
Wenn zwei benachbarte Elementen ein margin haben, wird folgendes passieren:
margin werden eins. Die Größe ist gleich den größten Wert der beiden.margin kollabieren und der kleinste Werte (weiter weg von Null) wird verwendetmargin negativ ist, wird von der Summe abgezogenborder ist die Kurzform für border-width, border-style und border-color
.border {
border-width: thin medium thick 10px;
border-style: solid dashed dotted double;
border-color: crimson lightcoral deepskyblue forestgreen;
}
Merkwort: TRouBLe
Seit 2015
Flexbox ist eine eindimensionale Layout Methode, um Elemente in Reihen und Spalten darzustellen.
I love oat cake lemon drops cheesecake cake macaroon. Jelly beans jujubes carrot cake carrot cake brownie jelly beans cheesecake topping cheesecake. Topping danish gingerbread donut chocolate cake sweet. Lemon drops jelly beans jelly gingerbread bear claw.
Candy sugar plum biscuit carrot cake cake muffin. Caramels brownie pudding chocolate bar wafer I love. I love biscuit icing cheesecake bonbon lemon drops tootsie roll dessert chocolate bar. Carrot cake gingerbread ice cream sugar plum I love.
Marzipan bear claw cake tootsie roll I love sesame snaps apple pie. Fruitcake danish I love candy canes dessert sweet roll donut. Chupa chups pie gummi bears biscuit fruitcake jelly beans.
Fruitcake halvah shortbread biscuit oat cake oat cake chocolate cake pie tiramisu. Wafer chupa chups muffin tiramisu cookie jujubes cheesecake. Cheesecake candy canes tiramisu powder tootsie roll soufflé apple pie sugar plum.
.flex {
display: flex;
gap: 1rem;
}
I love oat cake lemon drops cheesecake cake macaroon. Jelly beans jujubes carrot cake carrot cake brownie jelly beans cheesecake topping cheesecake. Topping danish gingerbread donut chocolate cake sweet. Lemon drops jelly beans jelly gingerbread bear claw.
Candy sugar plum biscuit carrot cake cake muffin. Caramels brownie pudding chocolate bar wafer I love. I love biscuit icing cheesecake bonbon lemon drops tootsie roll dessert chocolate bar. Carrot cake gingerbread ice cream sugar plum I love.
Marzipan bear claw cake tootsie roll I love sesame snaps apple pie. Fruitcake danish I love candy canes dessert sweet roll donut. Chupa chups pie gummi bears biscuit fruitcake jelly beans.
Fruitcake halvah shortbread biscuit oat cake oat cake chocolate cake pie tiramisu. Wafer chupa chups muffin tiramisu cookie jujubes cheesecake. Cheesecake candy canes tiramisu powder tootsie roll soufflé apple pie sugar plum.
I love oat cake lemon drops cheesecake cake macaroon. Jelly beans jujubes carrot cake carrot cake brownie jelly beans cheesecake topping cheesecake. Topping danish gingerbread donut chocolate cake sweet. Lemon drops jelly beans jelly gingerbread bear claw.
Candy sugar plum biscuit carrot cake cake muffin. Caramels brownie pudding chocolate bar wafer I love. I love biscuit icing cheesecake bonbon lemon drops tootsie roll dessert chocolate bar. Carrot cake gingerbread ice cream sugar plum I love.
Marzipan bear claw cake tootsie roll I love sesame snaps apple pie. Fruitcake danish I love candy canes dessert sweet roll donut. Chupa chups pie gummi bears biscuit fruitcake jelly beans.
Fruitcake halvah shortbread biscuit oat cake oat cake chocolate cake pie tiramisu. Wafer chupa chups muffin tiramisu cookie jujubes cheesecake. Cheesecake candy canes tiramisu powder tootsie roll soufflé apple pie sugar plum.
Apple pie I love gingerbread jujubes topping chocolate cake. Muffin soufflé lollipop donut oat cake I love. Sweet roll gingerbread I love pudding lollipop chocolate cake chocolate soufflé bonbon. Topping ice cream jelly muffin cookie pudding pie ice cream.
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
}
.flex > div {
flex: 0 0 calc(33.33% - 2rem);
}
I love oat cake lemon drops cheesecake cake macaroon. Jelly beans jujubes carrot cake carrot cake brownie jelly beans cheesecake topping cheesecake. Topping danish gingerbread donut chocolate cake sweet. Lemon drops jelly beans jelly gingerbread bear claw.
Candy sugar plum biscuit carrot cake cake muffin. Caramels brownie pudding chocolate bar wafer I love. I love biscuit icing cheesecake bonbon lemon drops tootsie roll dessert chocolate bar. Carrot cake gingerbread ice cream sugar plum I love.
Marzipan bear claw cake tootsie roll I love sesame snaps apple pie. Fruitcake danish I love candy canes dessert sweet roll donut. Chupa chups pie gummi bears biscuit fruitcake jelly beans.
Fruitcake halvah shortbread biscuit oat cake oat cake chocolate cake pie tiramisu. Wafer chupa chups muffin tiramisu cookie jujubes cheesecake. Cheesecake candy canes tiramisu powder tootsie roll soufflé apple pie sugar plum.
Apple pie I love gingerbread jujubes topping chocolate cake. Muffin soufflé lollipop donut oat cake I love. Sweet roll gingerbread I love pudding lollipop chocolate cake chocolate soufflé bonbon. Topping ice cream jelly muffin cookie pudding pie ice cream.
.flex {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
flex-direction: column;
}
.flex .footer {
margin-top: auto;
}
.zentriert {
display: flex;
justify-content: center;
align-items: center;
}
Seit 2020
CSS Grid Layout ist eine zweidimensionale Layout Methode. Damit lassen sich Inhalte in Reihen und Spalten organisieren und komplexe Layouts erstellen.
.examplegrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--gutter-1);
}
I love oat cake lemon drops cheesecake cake macaroon. Jelly beans jujubes carrot cake carrot cake brownie jelly beans cheesecake topping cheesecake. Topping danish gingerbread donut chocolate cake sweet. Lemon drops jelly beans jelly gingerbread bear claw.
Candy sugar plum biscuit carrot cake cake muffin. Caramels brownie pudding chocolate bar wafer I love. I love biscuit icing cheesecake bonbon lemon drops tootsie roll dessert chocolate bar. Carrot cake gingerbread ice cream sugar plum I love.
Marzipan bear claw cake tootsie roll I love sesame snaps apple pie. Fruitcake danish I love candy canes dessert sweet roll donut. Chupa chups pie gummi bears biscuit fruitcake jelly beans.
Fruitcake halvah shortbread biscuit oat cake oat cake chocolate cake pie tiramisu. Wafer chupa chups muffin tiramisu cookie jujubes cheesecake. Cheesecake candy canes tiramisu powder tootsie roll soufflé apple pie sugar plum.
Apple pie I love gingerbread jujubes topping chocolate cake. Muffin soufflé lollipop donut oat cake I love. Sweet roll gingerbread I love pudding lollipop chocolate cake chocolate soufflé bonbon. Topping ice cream jelly muffin cookie pudding pie ice cream.
@supports (display:grid) {
.site-grid {
display:grid
grid-gap: 0 1em;
grid-template-columns:
[full-start] minmax(0,1fr)
[main-start] repeat(4,minmax(0,19.875rem))
[main-end] minmax(0,1fr) [full-end];
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
}
.site-grid > [class^=container-],
.site-grid > [class*=\ container-] {
column-gap: 1em;
width: 100%;
max-width: none
}
.site-grid > .full-width {
grid-column: full-start/full-end
}
@media (width>=992px) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
}
}
}
body:not(.has-sidebar-left) .site-grid .container-component {
grid-column-start: main-start;
}
body:not(.has-sidebar-right) .site-grid .container-component {
grid-column-end: main-end;
}
.container-component {
grid-area: comp;
grid-column-start: comp;
}
.container-sidebar-right {
grid-area: side-r;
}
...
Test
.grid-overlap {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
.overlap {
grid-column: 1;
grid-row: 1;
background-color: rgba(255, 255, 255, .4);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all ease-in-out .6s;
.h2 {
font-size: 3rem;
}
}
.background {
grid-column: 1;
grid-row: 1;
img {
width: 100%;
height: 400px;
object-fit: cover;
}
}
&:hover {
.overlap {
opacity: 1;
}
}
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.grid-overlap-partial {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 50px 1fr 50px;
.background2 {
grid-row: 1 / 4;
grid-column: 4 / 8;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.overlap2 {
grid-row: 2;
grid-column: 2 / 5;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
div {
padding: 4rem;
background-color: #ededed;
border-radius: 48% 52% 67% 33% / 30% 43% 57% 70%;
}
}
}
Seit 2023
In einem Subgrid erben die Kinder-Elemente die Eigenschaften des Eltern-Grids
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-rows: 1fr 1fr 1fr;
}
.grid-item {
grid-row: 1 / 4;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.grid-item {
grid-row: 1 / 4;
display: grid;
grid-template-rows: subgrid;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 220px auto 1fr;
grid-auto-flow: dense;
gap: var(--gutter-1);
margin-bottom: 3rem;
}
.blog-grid__item {
grid-column: span 2;
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
row-gap: 0px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px;
background-color: rgb(255, 255, 255);
border-radius: 0.5rem;
overflow: hidden;
}
.blog-grid__item h2 {
font-size: calc(1.1rem + .5vw);
margin: .5rem 0;
}
.blog-item__content {
display: flex;
flex-direction: column;
}
.blog-item__content .article-info {
margin-top: auto;
}
.blog-grid__item .item-image img {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-grid__item .item-image {
margin-bottom: .5rem;
grid-row: 1;
}
.blog-grid__item > :not(.item-image) {
padding: 0 var(--gutter-1);
}
@media (min-width: 996px) {
.blog-grid .blog-grid__item.item-featured {
grid-column: span 4;
grid-template-columns: subgrid;
> * {
grid-column: 1 / -1;
}
}
}
Seit 2023
Funktioniert ähnlich wie Media Queries, statt die Größe des Viewports zu prüfen, nutzt man die Größe des Containers.
@media (max-width: 1250px) {
/* … */
}
.main {
container-type: inline-size;
container-name: main;
}
@container main (min-width: 400px) {
.boxes {
grid-template-columns: 1fr 1fr;
}
}
Mit Logical Properties definiert man Eigenschaften in Bezug auf die Schreibrichtung des Inhalts und nicht anhand räumlicher Angaben. Das ist für mehrsprachigen Seiten besonders von Vorteil.
Logische Eigenschaften und Werte verwenden die abstrakten Begriffe block und inline, um die Richtung zu beschreiben, in der sie fließen. Die physische Bedeutung dieser Begriffe hängt vom Schreibmodus ab.
Die Block-Achse ist senkrecht zum Textfluss
Die Inline-Achse ist parallel zum Textfluss
top, bottom, left, right
block-start, block-end, inline-start, inline-end
span {
margin-right: 3rem;
padding: .5rem;
border: 1px solid #000;
}
span {
margin-inline-end: 3rem;
padding: .5rem;
border: 1px solid #000;
}
.borders {
border-block: 3px solid crimson;
border-inline: 3px dashed blue;
}
Seit 2017
Benutzerdefinierte Eigenschaften (meistens als CSS-Variablen bezeichnet) sind eigens definierte Werte, die an mehreren Stellen wiederverwendet werden sollen.
Sie werden mit zwei Strichen definiert (--meine-variable) und als var(--meine-variable) eingesetzt.
Typische Nutzung: Farben, Schatten, Größen
:root {
--color-primary: crimson;
--color-secondary: cornflowerblue;
--box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
--gutter: 1rem;
}
.special {
--color-primary: blueviolet;
}
.btn {
text-decoration: none;
color: var(--btn-color);
background-color: var(--btn-bg-color);
border: 1px solid var(--btn-border-color);
border-radius: .5rem;
padding: var(--btn-gutter, 2rem);
font-size: var(--btn-size, inherit);
&:hover {
color: var(--btn-hover-color);
background-color: var(--btn-hover-bg-color);
}
}
.btn-primary {
--btn-color: #fff;
--btn-bg-color: #ac0420;
--btn-hover-color: #ac0420;
--btn-hover-bg-color: #fff;
--btn-border-color: #ac0420;
}
.btn-secondary {
--btn-color: #000;
--btn-bg-color: #bddf01;
--btn-hover-color: #bddf01;
--btn-hover-bg-color: #000;
--btn-border-color: #bddf01;
}
.btn-small {
--btn-gutter: 1rem;
--btn-size: .9rem;
}
.btn-medium {
--btn-gutter: 3rem;
--btn-size: 1.5rem;
}
:hover, :focus, :checked, :first-child ...
a:not([class]) {
color: darkslategrey;
text-decoration-color: gold;
text-decoration-thickness: .2em;
text-underline-offset: 6px;
transition: all ease-in-out .2s;
&:hover {
text-decoration-thickness: .4em;
text-underline-offset: 4px;
}
}
Es muss sicher gestellt werden, dass der visuelle Fokusindikator von Menschen mit Sehschwäche gesehen werden kann. Dies ist auch für alle von Vorteil, die einen Bildschirm in einer sehr hellen Umgebung verwenden. WCAG 2.1 SC 1.4.11 (Non-Text Contrast) erfordert, dass der Kontrast des visuellen Fokusindikators mindestens 3:1 beträgt.
Moderne Browser zeigen Fokusindikatoren nur, wenn dies für den Benutzer am hilfreichsten ist. Wenn beispielsweise mit einem Zeigegerät auf eine Schaltfläche geklickt wird, wird der Fokus im Allgemeinen nicht visuell angezeigt, aber wenn ein Textfeld fokussiert ist, das eine Benutzereingabe erfordert, wird der Fokus angezeigt. Während Fokusstile immer erforderlich sind, wenn Benutzer mit der Tastatur auf der Seite navigieren oder wenn der Fokus über Skripts verwaltet wird, sind Fokusstile nicht erforderlich, wenn der Benutzer weiß, wohin er den Fokus setzt, beispielsweise wenn er ein Zeigegerät wie eine Maus oder einen Finger verwendet, um den Fokus physisch auf ein Element zu setzen, es sei denn, dieses Element erfordert weiterhin die Aufmerksamkeit des Benutzers.
:focus {
outline: none;
}
:focus-visible {
outline: 3px dotted crimson;
outline-offset: .1rem;
}
Seit 2023
figure:has(figcaption) {
padding: .5rem;
background-color: #fff;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.gridflex {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.gridflex:has(> :last-child:nth-child(2)) {
grid-template-columns: 1fr 1fr;
}
Element 1
Element 2
Element 3
Element 1
Element 2
Seit 2015
.h1 {
font-size: calc(1.375rem + 1.5vw);
}
Text responsive
Seit 2023
Die Funktion nimmt drei kommagetrennte Werte: clamp(min, val, max)
.display-1 {
font-size: clamp(2rem, 0.3881rem + 7.1642vw, 8rem);
}
Text responsive
Seit 2023
Mit der color-mix()-Funktion können zwei Farben kombiniert werden, um eine neue Farbe zu kreieren.
/* Basis Farbe */
.bg-1 {
background-color: teal;
}
/* 50% teal, 50% white */
.bg-2 {
background-color: color-mix(in srgb, teal, white);
}
/* 25% teal, 75% white */
.bg-3 {
background-color: color-mix(in srgb, teal, white 75%);
}
/* 50% teal, 50% black */
.bg-4 {
background-color: color-mix(in srgb, teal, black);
}
/* 25% teal, 75% black */
.bg-5 {
background-color: color-mix(in srgb, teal, black 75%);
}
Seit 2021
Funktionen, die mit relative colors arbeiten können: color(), hsl(), hwb(), lab(), lch(), oklab(), oklch(),
Syntax
color-function(from origin-color channel1 channel2 channel3)
color-function(from origin-color channel1 channel2 channel3 / alpha)
/* color space included in the case of color() functions */
color(from origin-color colorspace channel1 channel2 channel3)
color(from origin-color colorspace channel1 channel2 channel3 / alpha)
.rc {
--base-color: rgb(255, 30, 0);
}
.rc-1 {
background-color: var(--base-color);
}
.rc-2 {
background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
/* 76.5 is 30% of 255 */
}
.rc-3 {
background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
/* 153 is 60% of 255 */
}
Seit 2024
:root {
color-scheme: light dark;
}
.lightdark {
color: light-dark(#004040, #efedea);
background-color: light-dark(#efedea, #004040);
}
Ich bin was ich bin
Seit 2020
.color-scheme-a {
background: #c3acc0;
color: #671a54;
}
@media (prefers-color-scheme: dark) {
.color-scheme-a {
background: #671a54;
color: #c3acc0;
}
}
Ich respektiere die Einstellungen
Seit 2023
.mask {
mask: url(images/joomla.svg) no-repeat 50% 50%;
}
Seit 2023
Die CSS-Verschachtelung unterscheidet sich von CSS-Präprozessoren wie Sass darin, dass sie vom Browser gerendert und nicht von einem CSS-Präprozessor vorkompiliert wird.
Best practice: nicht mehr als drei Ebenen
.card-wrapper {
display: flex;
flex-direction: row;
gap: .5rem;
}
.card {
padding: .5rem;
border: 2px solid grey;
border-radius: .5rem;
& h2 {
/* entspricht .card h2 */
color: teal;
.featured & {
/* äquivalent zu `:is(.card h2):is(.featured h2)` */
color: crimson;
}
}
}
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Quelle: Codepen