CSS. 10 años Next
Naiara Abaroa

Naiara Abaroa

@nabaroa

Frontend designer en Wise

Show me the code

10 años de Bilbostack

Preguntas o feedback

Index

26 años de CSS

Early CSS

15 años de CSS en 1 slide

Color
Background
Border
  • display: none / inline / block
  • position: relative / absolute
  • selectors: id, class, combination

Y elLayout? 🍱

Las limitaciones ejercitan el 🧠

Table edge detail

Las cosas molonas las hacíamos con Flash.

Pero... 💀

Plot twist

2011

CSS 3

La última década

Empezamos a hacer

esto

y esto

y esto

y esto

y esto

y esto

y esto

y esto

y esto

Con 1 línea de código

Los efectos fancy pasaron de moda 😞

💀

Plot twist

Llega Content is King 👑

Y el Responsive Design ✨

Vel in comic

Custom properties 🌈

Custom properties

See the Pen Gap in flexbox by Naiara Abaroa (@nabaroa) on CodePen.

Selectores 🧷 and pseudo-classes

Selector graph
    LEVEL 1 & 2
  • Universal selector: *
  • Type selector: E
  • Class selectors: E.warning
  • ID selectors: E#id
  • Attribute selectors: E[foo]
  • Pseudo-classes: E:root
  • Pseudo-elements: E::before
  • Combinators: E F
  • Element child: >
  • Adjacent sibling convinator: +
  • General sibling convinator: ~
    LEVEL 3
  • [foo^="bar"]
  • [foo$="bar"]
  • [foo*="bar"]
  • [foo|="bar"]
  • E:not
  • E:nth-child(n)
  • E:nth-of-type(n)
  • E:first-child
  • E:last-child
  • E:fist-of-type
  • ...
  • E:only

:is & :where

See the Pen Untitled by Naiara Abaroa (@nabaroa) on CodePen.

Qué más? 🙋🏾‍♀️

Layout ⛩

Flexbox - Grid 🚀

Gap in flexbox

See the Pen Gap in flexbox by Naiara Abaroa (@nabaroa) on CodePen.

Logical properties and values 👉🏿👈🏿

💀

Left & Right ⚰️

RTL demo

    Values
  • float/clear: Flow-relative values inline-start and inline-end
  • text-align: Flow-relative values start and end
    Properties
  • margin/padding: Logical Properties padding-inline-start
  • left/right properties: inset-inline-start
  • border: border-inline-start

Scroll 🖱

smooth-scrolling

See the Pen Only CSS smooth scroll by Naiara Abaroa (@nabaroa) on CodePen.

Scroll snap

Demo Slides

Position sticky 📌

Position sticky

See the Pen 3 tips about position: sticky by Naiara Abaroa (@nabaroa) on CodePen.

Font variables 📝

Light

Regular

Bold

Sass Less Stylus Compass Prepros Postcss Grunt Gulp Webpack

y hoy en día?

Postcss

postcss-preset-env

2022 💣

ContainerQueries 📦

Container queries

See the Pen Cascade layers by Naiara Abaroa (@nabaroa) on CodePen.

Subgrid 🏢

Subgrid

See the Pen Cascade layers by Naiara Abaroa (@nabaroa) on CodePen.

:has👩‍👧

A Native CSS Parent Selector

:has

See the Pen Parent selector in CSS by Naiara Abaroa (@nabaroa) on CodePen.

Cascade layers 🥞

🤯

@layer

See the Pen Cascade layers by Naiara Abaroa (@nabaroa) on CodePen.

@layer

See the Pen Cascade layers by Naiara Abaroa (@nabaroa) on CodePen.

Usage:

  • Layer everything, so priority levels are really clear. Maybe allow unlayered CSS for super powerful overrides only, but ideally even do that as a high-level layer.
  • Resets as the lowest layer.
  • Third-party stuff as the middle layer(s).
  • Anything team-authored as the highest layer.

👑

@TerribleMia

Color fuctions 🎨

Color-mix

See the Pen Color functions by Naiara Abaroa (@nabaroa) on CodePen.

Relative colors

See the Pen Color functions by Naiara Abaroa (@nabaroa) on CodePen.

Futuro 🔮

Nesting 🐣

@scope ☂️

@when / @else 🤓

CSS NO es solo
colorear y dar estilo 🖍

Controlar CSS te da superpoderes ⚔️

Mi impacto en en 2021

Proponer e implementar un plan integral de RTL para web.

Performance: Preparar más de 380K páginas para que pasaran las Core Web Vitals

  • Implementar el Critic CSS
  • Mejorar el LCP (largest Contenful Paint) detectando imágenes de fondo que iban via CSS e implementarlos en el HTML con srcset.
  • Minimizar el CSS usando purgeCSS
  • Grupo de trabajo para testear la performance consumiendo el CSS via CDN

Asesorar al equipo de Design System.

🔚

Craft slides 🧶

CC0

Eskerrik asko ❤

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9