![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5193451/pixel-speech-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5193480/pug.gif)
Desarrollador Frontend desde hace 4 años.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5194830/logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195718/fili-social.jpg)
Le apasiona aprender, pero sobre todo enseñar.
✍️ 🎸 🍿 🎮
¿De dónde salió CSS?
1994
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5194861/1280px-W3C__Icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5194914/html-css.jpg)
world wide web consortium
Cascading
HTML
Style
Sheets
Stream-based
Style Sheets
Proposal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5194947/220px-Håkon-Wium-Lie-2009-03.jpg)
Håkon Wium Lie
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5194949/download-1.jpg)
Bert Bos
1994 - 1995
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5194988/Screen_Shot_2018-08-22_at_12.07.44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195005/css-vieja-confiable.jpg)
1995
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5194861/1280px-W3C__Icon.svg.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195096/lego-modules.jpg)
CSS 3.1
¿Y CSS4?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195104/nick-young-confused-face-300x256-nqlyaa.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195117/ezgif.com-gif-maker.gif)
¿WHY?
CSS3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195121/badge-css-3-512.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195196/Screen_Shot_2018-08-22_at_13.32.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195197/Screen_Shot_2018-08-22_at_13.32.19.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195198/Screen_Shot_2018-08-22_at_13.32.14.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195198/Screen_Shot_2018-08-22_at_13.32.14.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195198/Screen_Shot_2018-08-22_at_13.32.14.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195200/Screen_Shot_2018-08-22_at_13.31.12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195210/Screen_Shot_2018-08-22_at_13.41.02.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195217/Screen_Shot_2018-08-22_at_13.41.05.png)
Candidate Recommendation
Un documento que satisface los requisitos técnicos del Grupo de Trabajo y ya ha recibido una amplia revisión.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195222/Screen_Shot_2018-08-22_at_13.41.08.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195227/Screen_Shot_2018-08-22_at_13.41.13.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195228/Screen_Shot_2018-08-22_at_13.41.17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195257/CSS-LEVELS.jpg)
w3.org/Style/CSS/current-work
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195260/Screen_Shot_2018-08-22_at_13.30.58.png)
¿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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195539/Screen_Shot_2018-03-24_at_18.43.45.png)
.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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195565/Screen_Shot_2018-08-22_at_16.29.11.png)
.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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5309802/pasted-from-clipboard.png)
image-set (function)
images - level 3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5309804/pasted-from-clipboard.png)
.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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195585/ezgif.com-gif-maker__2_.gif)
¿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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5309842/ezgif-5-9466bfd48a.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195596/1_o4o91o4dltkqj46itgdc3g-38a203b4b72e277f1c120550df991eac-1902c.png)
Imagen de: @yeion7
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5309881/pasted-from-clipboard.png)
Imagen: smashingmagazine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5309886/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5309896/pasted-from-clipboard.png)
Imagen: smashingmagazine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5309901/pasted-from-clipboard.png)
Imagen: smashingmagazine
Definir como los navegadores van a implementar ciertas características
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195624/ezgif.com-gif-maker__3_.gif)
Crear plugins o polyfills que no existen o siguen siendo propuestas.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195672/ezgif.com-gif-maker__5_.gif)
La posibilidad de crear nuestras propias interfaces (reglas).
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195828/Screen_Shot_2018-08-22_at_16.59.13.png)
body {
display: layout('masonry');
}
No permite pintar en un contexto de dibujo en 2D.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195658/Screen_Shot_2018-08-22_at_17.04.55.png)
.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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370607/images/5195714/ezgif.com-gif-maker__6_.gif)
smashingmagazine.com
filisantillan.com/agenda
Instagram: @fili.js
Twitter: @filijs
Facebook: Fili Santillán
😎
Gracias
Subiendo de nivel en CSS
By Fili Santillán
Subiendo de nivel en CSS
- 1,902