5 Nuevas características CSS calientes y cómo usarlas

En este artículo, exploraremos cinco nuevas propiedades que llegarán a CSS, eche un vistazo a lo que hacen y cómo ponerlos en uso práctico en sus proyectos. Vamos a estar creando un Diseño de sitio web Para una página que incluye una noticia y un pequeño cuadro de chat en la esquina. Para más trucos de CSS, eche un vistazo a nuestro artículo explorando diferentes Ejemplos de animación CSS . Si estás creando un sitio completamente nuevo, prueba un Creador de sitios web y asegúrate de navegar por tu Alojamiento web Opciones aquí.

Para este tutorial, necesitará cromo 65+ o Firefox 59+. Echar un vistazo a la acompañando a github repo para el código paso a paso. Aprovechamos las siguientes funciones para crear una mejor experiencia y trabajar en algunos problemas. Y si está diseñando junto a un equipo, utilice lo mejor. almacenamiento en la nube Para mantener las cosas cohesivas.

Módulo de pantalla CSS (Nivel 3)

• Mostrar: Contenidos;
• Estado w3c - Borrador de trabajo
• Soporte de navegador

Módulo de reglas condicionales CSS (Nivel 3)

• @apoyo(...) {...}
• Estado w3c - Recomendación candidata
• Otras lecturas: MDN Web DOCS

CSS Módulo de comportamiento de compuerta en exceso (Nivel 1)

• Sobre el comportamiento: contener;
• Estado w3c - no oficial
• Soporte de navegador
• Otras lecturas: Toma el control de tu pergamino.

Módulo de Selectores CSS (Nivel 4)

• : enfoque-dentro
• Estado w3c - Borrador de trabajo
• Soporte de navegador
• Lectura adicional: MDN Web DOCS : enfoque-dentro De : marcador de posición mostrado

El módulo de contención CSS (Nivel 1)

• contienen: pintura;
• Estado w3c - Recomendación candidata
• Soporte de navegador
• Otras lecturas: Contención CSS en Chrome 52

01. Configure el HTML para los noticias

Primero necesitamos establecer un marcado súper simple y repetido para nuestra noticia. Vamos a crear un .envase div con una lista desordenada dentro. Dar el & lt; ul & gt; la clase de .alimentar , luego cree 10 artículos de lista cada uno que contiene un div con el .tarjeta Clase y la tarjeta de texto 1, tarjeta 2, etc.

Finalmente crea otro artículo de lista entre 5 y 6 con una clase de .anidado - Esto será útil más tarde, y agregará un & lt; ul & gt; Dentro de tres elementos de la lista con la tarjeta de texto A, tarjeta B, etc.

& lt; cuerpo y gt;
 & lt; div clase = "contenedor" y gt;
 & lt; ul class = "feed" & gt;
 & lt; LI & GT; & LT; DIV CLASE = "CARD" & GT; TARJETA 1 & LT; / DIV & GT; & LT; / LI & GT;
 & lt; LI & GT; & LT; DIV CLASE = "CARD" & GT; TARJETA 2 & LT; / DIV & GT; & LT; / LI & GT;
 & lt; Li & GT; & lt; DIV clase = "Tarjeta" & GT; Tarjeta 3 & LT; / DIV & GT; & LT; / LI & GT;
 & lt; LI & GT; & LT; DIV CLASE = "TARJETA" & GT; TARJETA 4 & LT; / DIV & GT; & LT; / LI & GT;
 & lt; Li & GT; & LT; DIV CLASS = "CARD" & GT; TARJETA 5 & LT; / DIV & GT; / Li & GT;
    & lt; li clase = "anidado" & gt;
 & lt; ul & gt;
 & lt; li & gt; y lt; DIV clase = "Tarjeta" & GT; Tarjeta A & LT; / DIV & GT; / Li & GT; / Li & GT;
 & lt; LI & GT; & LT; DIV CLASE = "TARJETA" & GT; Tarjeta B & LT; / DIV & GT; / LI & GT;
 & lt; LI & GT; & LT; DIV CLASE = "CARD" & GT; CARD C & LT; / DIV & GT; & LT; / LI & GT;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; Li & GT; & LT; DIV CLASS = "CARD" & GT; TARJETA 6 & LT; / DIV & GT; & LT; / LI & GT;
 & lt; li & gt; y la tarjeta 7 & lt; / div & gt; & lt; & lt; / lt; / lt; / lt; / li & gt; / li & gt;
 & lt; Li & GT; & Lt; Div Class = "Tarjeta" & GT; Tarjeta 8 & LT; / DIV & GT; / Li & GT; / Li & GT;
 & lt; LI & GT; & LT; DIV CLASS = "CARD" & GT; TARJETA 9 & LT; / DIV & GT; & LT; / LI & GT;
 & lt; LI & GT; & LT; DIV CLASE = "TARJETA" & GT; TARJETA 10 & LT; / DIV & GT; / LI & GT;
 & lt; / ul & gt;
& lt; / DIV & GT;
& lt; / body & gt; 

02. Estilo el newsfeed

Ahora necesitamos agregar algunos estilos rápidos para que esto comience a parecer más como una noticia. Primero podemos dar & lt; cuerpo y gt; Un color gris sutil de color. Entonces da .envase un ancho máximo de 800px y uso Margen: 0 Auto; al centro alinearlo.

También digamos .tarjeta un fondo blanco, 10px de acolchado y margen y finalmente un altura mínima de 300px: esto debería darnos lo suficiente para que la página sea desplazable. Por último, espolvorearemos una magia de FlexBox en el .alimentar Para hacer que los artículos fluyan bien, con dos cartas por fila.

 .feed {
PANTALLA: FLEX;
Flex-Wrap: Wrap;
}
.feed li {
FLEX: 1 0 50%;
} 

03. Fijar problemas de diseño

Si se desplaza hacia abajo en la lista, notará que nuestras tarjetas en la lista anidada, la tarjeta A - C, están causando algunos problemas de diseño. Idealmente, nos gustaría que fluyan con el resto de las cartas, pero todos están atrapados en una sola cuadra. La razón de esto es que un contenedor flexible, que se crea utilizando PANTALLA: FLEX - Solo hace que sus hijos inmediatos (es decir, los elementos de la lista) en artículos flexibles.

Ahora, normalmente, la única forma de arreglar esto es cambiar el marcado, pero permita que no tenga ese lujo. Quizás la marca de noticias sea generada por un script de terceros o su código heredado que solo está tratando de residir. Entonces, ¿cómo podemos arreglar esto?

Encontrarse Mostrar: Contenidos . Este pequeño soleador esencialmente hace que un elemento se comporte como si no estuviera allí. Todavía ves los descendientes del elemento, pero el elemento en sí no afecta el diseño.

Porque estamos fingiendo que no podemos cambiar el marcado (solo por este paso) podemos ser un poco inteligentes acerca de esto y hacer que la .tarjeta Elementos de los elementos flexibles y casi enteramente ignora el marcado de lista.

Primero retire el existente .feed li clase y luego usar Mostrar: Contenidos para ambos & lt; ul & gt; y & lt; li & gt; elementos:

 .feed ul,
.feed li {
Mostrar: Contenidos;
} 

Ahora debes ver las tarjetas que fluyen en orden, pero hemos perdido el tamaño. Arreglar eso agregando la propiedad FLEX a la .tarjeta en lugar de:

 .card {
FLEX: 1 0 40%;
} 

Ta-da! Nuestras tarjetas ahora están usando las maravillas de FlexBox como si su marcado estructural no ordenado no existe.

Como nota lateral, podrías estar preguntando por qué el base flexible El valor se establece en 40%. Esto se debe a que el .tarjeta Clase tiene un margen, que no está incluido en el cálculo del ancho, como lo esperaba cuando se use Tamaño de la caja: Border-Box . Para solucionar esto solo necesitamos establecer el base flexible Lo suficientemente alto como para activar la envoltura en el punto necesario y FlexBox completará el espacio restante automáticamente.

04. Explorar consultas de características

Aunque Mostrar: Contenidos ¿Es exactamente lo que necesitamos, todavía está solo en el estado de tiro de trabajo con W3C? Y en el apoyo de Chrome solo llegó a la versión 65 lanzada en marzo de 2018. ¡Increíblemente Firefox ha tenido apoyo desde abril de 2015!

Si deshabilita el estilo en DevTools, verás que nuestros cambios han hecho un poco de desastre con el diseño cuando Mostrar: Contenidos no se aplica Entonces, ¿qué podemos hacer al respecto? Tiempo para nuestra próxima nueva característica: consultas de características.

Estos trabajan igual que las consultas de los medios, pero le permiten pedirle al navegador, solo usar CSS, si se admite una propiedad y una expresión de valor. Si son, se aplicarán los estilos contenidos dentro de la consulta. Ahora, vamos a mover nuestro Mostrar: Contenidos Estilos en una consulta de características.

 @Supports (Pantalla: Contenido) {
.feed ul,
.feed li {
  Mostrar: Contenidos;
}
.tarjeta {
  FLEX: 1 0 40%;
}
} 

05. Use 'NO' para un resultado más limpio

Normalmente, en este tipo de escenario de mejora progresiva, utilizaríamos la consulta para agregar los nuevos estilos, pero también tendría que deshabilitar algunos de los estilos originales necesarios para el diseño de la libreta.

Sin embargo, es posible que decida que, debido a que el soporte para las consultas de características es bastante bueno (si ignore IE), en realidad, desea utilizar la consulta de la función no operador. Funciona igual que esperar, para que podamos volver a aplicar nuestro original. flexionar propiedad a los artículos de lista cuando Mostrar: Contenidos no es apoyado:

 @Sopports no (Pantalla: Contenido) {
.feed li {
  FLEX: 1 0 50%;
}
} 

Dentro de no consulta podemos agregar algunos estilos para que la .anidado Los artículos básicamente vuelven a aplicar lo que estaba siendo heredado usando Mostrar: Contenidos .

 feed li.neestad {
Flex-base: 100%;
}
.feed li.nested ul {
 PANTALLA: FLEX;
 Flex-Wrap: Wrap;
} 

06. Tómalo un paso más allá.

Ya puede ver el potencial de las consultas de características, pero lo realmente genial es que puede combinar expresiones utilizando los tres operadores disponibles: y De o y no . Tal vez también podríamos verificar PANTALLA: FLEX Soporte y luego agregue un retraso a base de flotador.

No vamos a hacer eso aquí, pero si estuviéramos modificando primero las dos consultas de características, así:

 @Supports (PANTALLA: FLEX) y (PANTALLA: CONTENIDOS) {
...
}
@Supports (PANTALLA: FLEX) y (NO (PANTALLA: CONTENIDO)) {
...
} 

Como un bono, también puede probar para obtener un soporte de propiedades personalizadas como esta:

 @Supports (--foo: verde) {
...
} 

07. Añadir un cuadro de chat

Ahora tenemos una hermosa noticias en su lugar, agreguemos un pequeño cuadro de chat que se fija a la parte inferior derecha de la pantalla. Necesitaremos una lista de mensajes y un campo de texto para que el usuario ingrese su mensaje. Añadir este bloque justo después de la apertura & lt; cuerpo y gt; etiqueta:

 & lt; div clase = "chat" & gt;
 & lt; div clase = "Mensajes" y GT;
 & lt; ul & gt;
& lt; LI & GT; & LT; DIV CLASE = "MENSAJE" & GT; MENSAJE 1 & LT; / DIV & GT; / LI & GT; / LI & GT;
& lt; li & gt; y lt; div clase = "Mensaje" & gt; Message 2 & Lt; / DIV & GT; / Li & GT; / Li & GT;
& lt; LI & GT; & LT; DIV CLASE = "MENSAJE" & GT; MENSAJE 3 & LT; / DIV & GT; / LI & GT;
& lt; li & gt; y lt; DIV clase = "Mensaje" & gt; Mensaje 4 & Lt; / DIV & GT; / Li & GT; / Li & GT;
& lt; li & gt; y lt; div clase = "Mensaje" & gt; mensaje 5 & lt; / DIV & GT; / Li & GT; / Li & GT;
& lt; li & gt; y lt; DIV clase = "Mensaje" & GT; Mensaje 6 & LT; / DIV & GT; & LT; / LI & GT;
& lt; li & gt; y lt; DIV clase = "Mensaje" & gt; Mensaje 7 & lt; / DIV & GT; / Li & GT; / Li & GT;
& lt; li & gt; y lt; div clase = "Mensaje" & gt; Mensaje 8 & lt; / DIV & GT; & LT; / LI & GT; / LI & GT;
& lt; li & gt; y lt; div clase = "Mensaje" & gt; Mensaje 9 & lt; / DIV & GT; / Li & GT; / Li & GT;
& lt; li & gt; y lt; DIV clase = "Mensaje" & GT; Mensaje 10 & lt; / DIV & GT; & LT; / LI & GT;
 & lt; / ul & gt;
 & lt; / DIV & GT;
 & lt; type = "texto" clase = "entrada" & gt;
& lt; / DIV & GT; 

08. Estilo el cuadro de chat

Es hora de agregar rápidamente algún estilo para que se vea medio decente.

 .chat {
 Fondo: #fff;
 Frontera: 10px sólido # 000;
 fondo: 0;
 Tamaño de fuente: 10px;
 Posición: fijo;
 derecha: 0;
 Ancho: 300px;
 Índice Z: 10;
}
.Mesajes {
 Fondo inferior: 5px sólido # 000;
 Desbordamiento: Auto;
 relleno: 10px;
 Max-altura: 300px;
}
.mensaje {
 Fondo: # 000;
 Radio de borde: 5px;
 Color: #fff;
 Margen: 0 20% 10px 0;
 relleno: 10px;
}
.Mesajes LI: Último hijo .Message {
 margen de fondo: 0;
}
.aporte {
 Frontera: Ninguno;
 bloqueo de pantalla;
 relleno: 10px;
 Ancho: 100%;
} 

09. Encadenamiento de desplazamiento

Esperemos que ahora tenga un pequeño cuadro de chat con una lista de mensajes desplazables sentados en la parte superior de su noticia. Genial. Pero, ¿ha notado lo que sucede cuando se desplaza dentro de un área anidada y llegas al final de su rango de desplazamiento? Intentalo. Desplácese hasta el final de los mensajes y verá que la página en sí se iniciará de desplazamiento. Esto se llama encadenamiento de desplazamiento.

No es un gran problema en nuestro ejemplo, pero en algunos casos podría ser. Hemos tenido que trabajar en esta característica antes de crear áreas desplazables dentro de los modales o los menús contextuales.

La corrección sucia es establecer el & lt; cuerpo y gt; a Desbordamiento: oculto , pero hay una nueva propiedad de CSS nueva y brillante que soluciona todo esto y es un simple forro. Saludar a cruel-comportamiento . Hay tres valores posibles:

• auto - El valor predeterminado, que permite la encadenamiento de desplazamiento.
• Contiene - Desactiva la encadenamiento de desplazamiento
• ninguno - Desactiva la encadenamiento de desplazamiento y otros efectos de descamación (por ejemplo, la banda de goma)

Podemos usar la taquigrafía. cruel-comportamiento o podemos apuntar a una dirección específica con Sobrecampo-Comportamiento-X (o -y ). Vamos a agregarlo a nuestro .Mesajes clase:

 .Mesajes {
...
Sobrescroll-Comportamiento-y: contener;
...} 

Ahora pruebe el desplazamiento de nuevo y verá que ya no afecta el desplazamiento de la página cuando llegue al final del contenido.

Esta propiedad también es bastante útil, si quisiera implementar una función de retención en su PWA, digamos para actualizar la noticia. Algunos navegadores, como Chrome para Android, agregan automáticamente los suyos y hasta ahora no ha habido una forma fácil de deshabilitarla sin usar JS para cancelar los eventos con los manipuladores no pasivos que afectan el rendimiento.

Ahora solo necesitas agregar Sobrecarga-comportamiento: contener al elemento que contiene la ventana, probablemente & lt; cuerpo y gt; o & lt; html & gt; .

Vale la pena señalar que esta propiedad no es un estándar W3C, más bien una propuesta del grupo comunitario de la incubadora web (WICG). Las propuestas populares, estables y maduras de WICG se consideran para la migración a un grupo de trabajo W3C en una etapa posterior.

10. Contraer el cuadro de chat cuando no está en uso

En este momento, el cuadro de chat ocupa un poco de espacio, lo que a menos que estemos interactuando con él está un poco distraído. Afortunadamente, podemos hacer algo al respecto con una pequeña magia de CSS.

Pero en primer lugar necesitamos modificar ligeramente nuestros estilos existentes. Por defecto, queremos que el cuadro de chat esté colapsado, por lo que necesitamos reducir el Altura máxima valor en el .Mesajes clase. Mientras estamos allí, también podemos agregar una transición a la Altura máxima propiedad:

 .Mesajes {
 ...
 Max-altura: 25px;
Transición: Altura máxima 500 ms; } 

Página siguiente: Continuar explorando nuevas funciones de CSS en los pasos 11-20

• 1
• 2

Página actual: Explora 5 nuevas características CSS: Pasos 01-10