Desarrollador Frontend desde hace 4 años.

Le apasiona aprender, pero sobre todo enseñar.

✍️ 🎸 🍿 🎮

¿De dónde salió CSS?

1994

world wide web consortium

Cascading

HTML

Style

Sheets

Stream-based

Style Sheets

Proposal

Håkon Wium Lie

Bert Bos

1994 - 1995

1995

1996

Se publica la primera recomendación oficial

1998

CSS Level 1

Se publica la segunda recomendación oficial

CSS Level 2

/ CSS 2.1 (Navegadores)

1998 1999

CSS Level 3

Sigue en desarrollo

CSS 3.1

¿Y CSS4?

¿WHY?

CSS3

CSS1

CSS2

CSS3

CSS4

No podía salir una versión nueva de CSS hasta que todo fuera revisado exactamente al mismo tiempo.

Separar CSS

border

Flexbox

Level 1

Level 2

Level 3

Level 1

Level 2

border

Flexbox

Level 1

Level 2

Level 3

Level 1

Level 2

First Public Working Draft

El nacimiento de una nueva propuesta que puede y siga con su desarrollo o no.

Working Draft

Un documento que el W3C ha publicado para su revisión por la comunidad

Candidate Recommendation

Un documento que satisface los requisitos técnicos del Grupo de Trabajo y ya ha recibido una amplia revisión.

Proposed Recommendation

Un documento que ha sido aceptado por el director del W3C con la calidad suficiente como para convertirse en una Recomendación del W3C.

Recommendation

Después de un amplio consenso, ha recibido la aprobación de los miembros del W3C y del director. W3C recomienda este punto ya como estándares para la web.

w3.org/Style/CSS/current-work​

¿Qué sigue?

Media Queries

@media screen and (min-width: 768px) {
  ...
}
@custom-media --small-desktop (min-width: 1024px);

@media (--small-desktop) {
  ...
}

Custom Media Queries

Level 5

@custom-media --small-desktop (width <= 1024px);

@media (--small-desktop) {
  ...
}

Media Queries Ranges

Level 4

.element {
  font-weight: 300;

  & .other-element {
    background-color: red;
    color: blue;
  }

  @media (--small-desktop) {
    font-weight: 700;
  }
}

Nesting

Level 3

.element {
  color: color(red alpha(50%));
}

.other-element {
  color: color(#282b39 alpha(30%) contrast(50%));
}

color (color function)

colors - level 4

color (color function)

colors - level 4

.element {
  color: gray(0 - 255);
}

gray (function)

colors - level 4

body {
  font-family: system-ui;
}

body {
  font-family: "Arial", system-ui;
}

system-ui

fonts - level 4

@custom-selector :--myButtons button, a[class*="btn"];
@custom-selector :--actions :hover, :focus;

:--myButtons {
  width: 200px;
  height: 50px;
  background-color: red;
}

:--myButtons:--actions {
  ...
}

custom-selectors

CSS Extensions

custom-selectors

CSS Extensions

.element {
  background-image: image-set(
    url(images/image.jpg) 1x,
    url(images/image@2x.jpg) 2x,
    url(images/image@3x.jpg) 3x,
    url(images/image600dpi.jpg) 600dpi,
  );
}

image-set (function)

images - level 3

.element {
  background-image: image-set(
    url(images/image.jpg) 1x,
    url(images/image@2x.jpg) 2x,
    url(images/image@3x.jpg) 3x,
    url(images/image600dpi.jpg) 600dpi,
  );
}

image-set (function)

images - level 3

image-set (function)

images - level 3

image-set (function)

images - level 3

.element {
  background-image: url(image.jpg);
}

/* Consultamos si la pantalla es de alta resolución */
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .element {
    background-image: url(image@2x.jpg);
  }
}

/* Lo mismo aquí*/
@media (min-device-pixel-ratio: 3), (min-resolution: 288dpi){
  .element {
    background-image: url(image@3x.jpg);
  }
}

image-set (function)

images - level 3

/* Imagen para dispositivos de baja resolución */
.element {
  background-image: url(image.jpg);
}

/* Imagen para dispositivos de alta resolución */
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .element {
    background-image: url(image@2x.jpg);
  }
}

/* Imagen para dispositivos de baja resolución y el ancho mínimo de 468px */
@media (min-width: 468px) {
  .element {
    background-image: url(image-468.jpg);
  }
}

/* Imagen para dispositivos de alta resolución y el ancho mínimo de 468px */
@media (min-device-pixel-ratio: 2) and (min-width: 468px), (min-resolution: 192dpi) and (min-width: 468px), {
  .element {
    background-image: url(image-468@2x.jpg);
  }
}

/* Imagen para dispositivos de baja resolución y el ancho mínimo de 600px */
@media (min-width: 600px) {
  .element {
    background-image: url(image-600.jpg);
  }
}

/* Imagen para dispositivos de alta resolución y el ancho mínimo de 600px */
@media (min-device-pixel-ratio: 2) and (min-width: 468px), (min-resolution: 192dpi) and (min-width: 468px), {
  .element {
    background-image: url(image-600@2x.jpg);
  }
}
.element {
  background-image: image-set(
    url(image.jpg) 1x,
    url(image@2x.jpg) 2x,
    url(image@3x.jpg) 3x
  );
}

@media (min-width: 468px) {
  .element {
    background-image: image-set(
      url(image-468.jpg) 1x,
      url(image-468@2x.jpg) 2x,
      url(image-468@3x.jpg) 3x
    );
  }
}

@media (min-width: 600px) {
  .element {
    background-image: image-set(
      url(image-600.jpg) 1x,
      url(image-600@2x.jpg) 2x,
      url(image-600@3x.jpg) 3x
    );
  }
}

image-set (function)

images - level 3

CSS Houdini

¿Qué es?

Mozilla, Apple, Opera, Microsoft, HP, Intel y Google.

Darnos APIs de bajo nivel que nos permitan trabajar con ciertas partes del motor de CSS.

Imagen de: @yeion7 

Imagen: smashingmagazine

Imagen: smashingmagazine

Imagen: smashingmagazine

Definir como los navegadores van a implementar ciertas características

Crear plugins o polyfills que no existen o siguen siendo propuestas.

La posibilidad de crear nuestras propias interfaces (reglas).

body {
  display: layout('masonry');
}

No permite pintar en un contexto de dibujo en 2D. 

.bubble {
  --circle-color: blue;
  background-image: paint('circle');
}

La forma en que se va a parsear el código en CSS.

PARSER API

CSS POWER

filisantillan.com

yeisondaza.com 

w3.org/blog/CSS

css-tricks.com

escss.blogspot.com

smashingmagazine.com

filisantillan.com/agenda

Instagram: @fili.js

Twitter: @filijs

Facebook: Fili Santillán

😎

Gracias

Made with Slides.com