5 nuevas características de HTML y CSS muy a tener en cuenta en este 2018

El lenguaje HTML y CSS está en constante evolución, ofreciendo a los desarrolladores frontend y diseñadores web nuevas posibilidades. En este artículo veremos 5 nuevas características de HTML y CSS realmente emocionantes para crear sitios webs profesionales en este 2018.

El elemento <dialog>

Lanzado en la nueva especificación HTML 5.2 en diciembre de 2017, el elemento <dialog> te proporciona la posibilidad de crear ventanas de diálogo nativas en HTML puro. Por ahora solo funciona en Chrome y Chrome mobile.

<dialog>  
  <h2>Your title</h2>
  <p>Your content...</p>
</dialog>

Puntos de anclaje en el scroll mediante CSS

CSS Scroll Snap es un reciente módulo de CSS que introduce puntos de anclaje en el scroll de nuestro navegador. Estos determinan una posición especifica en la que puede terminar el scrollport de un contenedor después de que se haya completado una operación de desplazamiento.

Por desgracia, esta función aún no está implementada en la mayoría de navegadores.

img {
    /* Specifies that the center of each photo
       should align with the center of the scroll
       container in the X axis when snapping */
    scroll-snap-align: center none;
}
.photoGallery {
    width: 500px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Requires that the scroll position always be
       at a snap position when the scrolling
       operation completes. */
    scroll-snap-type: x mandatory;
}
<div class="photoGallery">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
</div>

En el ejemplo de más arriba, se utilizan una serie de imágenes dispuestas en un contenedor de scroll para crear una galería de imágenes.

Hemos cogido este ejemplo de W3C. Échale un vistazo para obtener más información sobre esta nueva y emocionante funcionalidad.

CSS dentro del body

La nueva especificación HTML 5.2 te permite agregar reglas de estilo dentro del body. Sí, se que no es una función muy atractiva, pero puede ser realmente útil en muchísimos casos.

<body>  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <style>
        p { color: #069; }
    </style>
    <p>Vestibulum interdum pellentesque massa</p>
</body> 

Variables

Los preprocesadores de CSS cuentan con variables desde hace mucho tiempo. Pero lo ideal es que las variables sean una característica nativa de CSS, y parece que ya se ha hecho un avance en ese camino.

Las variables de CSS están muy bien implementadas y funcionan perfectamente en la mayoría de navegadores. Puedes encontrar más información en la página de W3C.

Aquí puedes ver un ejemplo explicativo sobre cómo utilizar las variables nativas de CSS.

:root {
  --main-color: #069;
}

h1, h2, h3 { color: var(--main-colour); }  
a { color: var(--main-colour); text-decoration:underline } 

Soporte para queries

Como has visto en las funciones anteriores que he comentado, la compatibilidad con los navegadores sigue siendo la gran asignatura pendiente de todas estas características de CSS.

@supports es relativamente nueva y proporciona a los desarrolladores una forma de condicionar las reglas ssi las declaraciones de propiedades particulares son compatibles con el CSS.

@supports actualmente es compatible con todos los navegadores salvo con Internet Explorer 11.

@supports (mix-blend-mode: overlay) {
  .example {
    mix-blend-mode: overlay;
  }
}

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP