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;
}
}
Â