CSS

Reset

Meist wird zu Beginn eines Stylesheets die Standard-Darstellung der Browser „zurückgesetzt“, z.B. mittels:

* {
	margin: 0;
	padding: 0;
}

Alternativ dazu gibt es sogenannte „CSS Resets“, die meist besser und umfangreicher sind:

normalize.css

Debugging

Fügt an alle HTML-Elemente einen transparent-roten Hintergrund und einen roten Rahmen an:

html * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
}

Quelle: DEV Community: Re: My Favorite CSS Hack

Zentrieren

How To Center In CSS

calc()

MDN: calc()

Leerzeichen in der Content-Eigenschaft

Reguläre Leerzeichen in der Eigenschaft content werden nicht immer angezeigt, statt dessen muss ein geschütztes Leerzeichen eingesetzt werden, dies geht z.B. mit dem Unicode U00A0:

p:after {
	content: '\00a0';
}

Quelle: Stack Overflow: Add a space (" ") after an element using :after

Responsive Design

-webkit-text-size-adjust: 100%; has same effect as none in MobileSafari but doesn't prevent user from zooming text in desktop Safari.

Quelle: @shauninman

Animation

Animation mit CSS3

Literatur

Müller, Peter: Einstieg in CSS: Webseiten gestalten mit HTML und CSS. Rheinwerk Computing, 2015.
- Reihnwerk-Verlag: Einstieg in CSS: Webseiten gestalten mit HTML und CSS

320NN Development Wiki

Inhaltsverzeichnis

CSS