Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)

> Algunas de las funciones que vas a ver,
son experimentales... ¡Debes activarlas!

> Elementos flexibles CSS
Flexbox

> Block CSS
<div id="falcon">
<div id="luke"></div>
<div id="leia"></div>
<div id="solo"></div>
<div id="chewy"></div>
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:block;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML

> Flexbox CSS (hijos tamaño fijo)
<div id="falcon">
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML

> Flexbox CSS (altura flexible)
<div id="falcon">
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML

> Flexbox CSS (anchura flexible)
<div id="falcon">
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
}
#falcon div {
width:100%;
margin:5px;
background:blue;
}
CSS
HTML
Puedo
cambiar
el ancho
del padre
y los
hijos se
adaptan

> Flexbox CSS (centrar eje primario)
<div id="falcon">
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
justify-content:center;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML

> Flexbox CSS (centrar eje secundario)
<div id="falcon">
</div>
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
align-items:center;
}
#falcon div {
width:75px;
height:50px;
margin:5px;
background:blue;
} CSS
HTML

> Star Wars CSS
<div id="falcon">
</div>
div #luke {
background:linear-gradient(
#8b6e5a 25%, #f5e7e5 25%); }
div #leia {
background:linear-gradient(
#331f24 25%, #fff6e6 25%); }
div #solo {
background:linear-gradient(to left,
#190f17 25%, #f0dbd1 25%,75%,
#190f17 75%); }
div #chewy {
background:linear-gradient(-25deg,
#5e473c 50%, #f6f1f3 50%,55%,
#5e473c 55%); }
CSS
HTML

> Grid de elementos específicos
<div class="grid">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
</div>
.grid {
display:grid;
grid-template-columns:
50px 100px 150px 200px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px 100px 150px 200px

<div class="grid">
</div>
.grid {
display:grid;
50px 200px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px 200px
fila 1
fila 2

<div class="grid">
</div>
.grid {
display:grid;
grid-template-columns: 100px;
grid-template-rows:
50px 100px 50px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px
50px
auto
100px

> Grid de elementos cíclicos
<div class="grid">
</div>
.grid {
display:grid;
repeat(2, 200px 50px);
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px200px 50px200px

> Grid automáticos (con hueco)
<div class="grid">
</div>
.grid {
display:grid;
grid-template-columns:200px 50px;
grid-auto-rows: 50px;
grid-gap: 25px 10px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px200px
25px
50px
50px
10px
auto
rows

> Grid por áreas
<div class="grid">
</div>
.grid {
display:grid;
grid-auto-rows: 75px;
grid-template-areas: "head head"
"menu main"
"foot foot";
}
.a { grid-area:head; background:blue }
.b { grid-area:menu; background:red }
.c { grid-area:main; background:green }
.d { grid-area:foot; background:orange }
CSS
HTML

> Battery API
navigator.getBattery().then(
function(battery) {
console.log(battery.level); // 0..1
console.log(battery.charging); // true / false
battery.onlevelchange = function() {
// ha cambiado el nivel de carga
}
battery.onchargingchange = function() {
// se ha conectado/desconectado el dispositivo
}
}
);
JS

> Formas y máscaras CSS
Formas

> Formas CSS
<img id="cat"
src="http://i.imgsafe.org/5ef91780a2.png" alt="Gato">
<p>El ronroneo suele ser signo de satisfacción. Algunos gatos
lo hacen simplemente para tratar de calmarse a sí mismos.</p>
p {
width:400px;
font-size:22px;
padding:20px;
}
CSS
HTML
#cat {
width:400px;
float:left;
}

> Formas CSS
#cat {
shape-outside: polygon(125px 0, 160px 100px, 248px 250px,
125px 250px);
}

> Máscaras CSS
<img id="cat"
src="http://i.imgsafe.org/5db73ca36b.jpg"
alt="Gato">
#cat {
border:5px solid green;
}
CSS
HTML

> Máscaras CSS
<img id="cat"
src="http://i.imgsafe.org/5db73ca36b.jpg"
alt="Gato">
#cat {
clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
HTML

> Máscaras CSS
#cat {
clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS

> ellipse() > inset() > circle()

HTTP/2HTTP/2
HTTP/0.9 HTTP/1 HTTP/1.1 HTTP/2
1991 1996 2006 2016

Ventajas de HTTP/2
- Una sola conexión TCP
- Eliminación de redundancia/latencia
- Compresión de cabeceras
- Compatible con HTTP/1.1

> Custom Properties CSS
Variable
s

> Variables CSS (Custom Prop)
<div id="box">A</div>
<div id="revbox">A</div>
#box, #revbox {
width:200px;
height:200px;
display:inline-flex;
flex-direction:column;
font-size:142px;
text-align:center;
}
CSS
HTML

> Variables CSS (Custom Prop)
A A

#box {
background:var(--fondo); // no hay variable
color:var(--texto); // no hay variable
}
#revbox {
--fondo: steelblue;
background:var(--texto); // no hay variable
color:var(--fondo); // steelblue
border:1px solid var(--fondo); // steelblue
}
CSS

:root {
--fondo: red;
--texto: white;
}
#box {
background:var(--fondo); // red
color:var(--texto); // white
}
#revbox {
background:var(--texto); // white
color:var(--fondo); // red
border:1px solid var(--fondo); // red
}
CSS

document.addEventListener('visibilitychange', function(){
if (document.visiblityState === 'hidden') {
var sessionData = generateSessionData();
navigator.sendBeacon('/collector', sessionData);
}
});
JS

Blend
modes
> Modos de fusión CSS

Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

En vedette

En vedette (7)

Plus de Román Hernández

Plus de Román Hernández (9)

Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)