CSS kennis refresh course

Als onderdeel van mijn “back to my webdeveloper roots” activiteiten heb ik de micro habit bedacht om elke dag op alfabetische volgorde 1 CSS property’s uit de almanac te behandelen. Dit zijn er op dit moment van schrijven 306 stuks, dus als ik er 1 per dag doe en tijdens werk en op study dag extra ben ik wel klaar als de kleine er is.

A

• ::before / ::after
• :active
• :any-link
• Adjacent sibbling
• [attribute]
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• appearance
• aspect-ratio

B

• ::Backdrop

::before / ::after

Een property uit de pseudo classes hoek. Deze wordt gebruikt om content in een element te plaatsen zonder dat dit zich in de HTML bevind. Een grensgeval wat CSS is juist ooit bedacht om content en opmaak van elkaar te scheiden. In tegenstelling tot wat de woorden before & after je doen geloven, bevindt de content zich in het element waar je het op zet. Can i use?

:active

Een property uit de pseudo classes hoek. Active is een state van een href die heel even zichtbaar is op het moment dat je een link aanklikt.

a:active {
   text-decoration: underline;
}

Can i use?

:any-link

Een property uit de pseudo classes hoek. Momenteel in de experimentele fase en onderdeel van de Selectors Level 4 specificaties. Deze class target alles wat een link is, dat wil zeggen alle anchors die daardwerkelijk een href (link) bevatten. Can i use?

Adjacent sibbling

Zelf geen selector maar bedoelt om selectors te combineren. Zo kun je hem bijvoorbeeld gebruiken om de tweede P te stijlen door P + P {} te selecteren.

p + p {
  color: red;
}

Can i use?

[attribute]

Geen property op zich maar een attribute is een onderdeel van een HTML tag, bijvoorbeeld de href van een A, of de src van een IMG. Los van dat je op het A of IMG element kan stylen kun je ook de attribute van een element pakken. Hiermee kun je heel specifiek stylen, de mogelijkheden zijn plenty.

img[alt~="person"][src*="lorem"] {
  /* style rules here */
}

accent-color

Momenteel nog een experimentele functie als onderdeel van de CSS Basic User Interface Module Level 4. Onderdeel van het oplossen van een van de grootste pain in the asses in front-end land op dit moment en dat is het stylen van formulier elementen. Zoals ik het begrijp kun je hiermee de browser standaard kleur aanpassen van het accent.

.element {
  accent-color: #f8a100;
}

Op dit moment heeft het nog geen top browser ondersteuning. Can i use?

align-content

Sub onderdeel flexbox waarmee je een regel in een flex container kunt positioneren op de cross axis.

• flex-start: start van de container
• flex-end: einde van de container
• center: midden van de container
• space-between: automatische uitlijning van alle items
• space-around: : automatische uitlijning van alle items met dezelfde ruimte er tussen
• stretch: default state, automatische verdeling

.flex-container {
  align-content: space-around;
}

Goeie ondersteuning in alle populaire browsers. Can i use?

align-items

Align-items is een sub van property en kun je zien als de justify-content voor de dwarsas. Waarden kunnen zijn flex-start | flex-end | center | baseline | stretch. Zowel flexbox als ook grid hebben een goede browser ondersteuning.

align-self

Align-self is ook een subproperty van flexbox. Ook deze heeft de volgende 5 waarden auto | flex-start | flex-end | center | baseline | stretch. Je kunt deze gebruiken om de algemene instellingen per item te overrulen.
all

“All is de reset op property niveau. Het zet alles terug van het element naar de standaard CSS specificaties. .module {
all: unset;
}. Goede ondersteuning in alle browsers. Can i use?

animation

De animation property is een van de imho vetste property’s van CSS omdat je hiermee animaties kan toevoegen aan enorm veel andere propertys. Hierbij moet je wel opletten op de performance natuurlijk maar je kunt er ontzettend veel mee. Samen met de  @keyframes at-rule waar je de daadwerkelijke animatie mee definieert en de tijdlijn kun je van alles maken.

See the Pen A simple animation by CSS-Tricks (@css-tricks) on CodePen.

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

input[type=search] {
  -webkit-appearance: none;
}

.element {
  aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */
}

.element {
  aspect-ratio: 1 / 1; /* ⏹ a perfect square */
}

dialog::backdrop {
  background-color: darkorange;
}