Si es como yo, cuando ve una demostración impresionante de una nueva característica de CSS3, no puede esperar para comenzar a usarla en los sitios web. Por supuesto, luego ve que está disponible solo en uno o dos de los principales navegadores (y esto nunca incluye IE), por lo que finalmente decide esperar. Tengo buenas noticias para ti:con los últimos lanzamientos de navegadores, hay algunas características increíbles que finalmente son compatibles en todas partes, ¡y puedes comenzar a usarlas ahora mismo!
Una palabra de precaución:la mayoría de estas funciones no funcionarán en versiones anteriores de IE (9 y anteriores). Si estos navegadores son una gran parte de su grupo demográfico, me temo que tendrá que confiar en los recursos alternativos. Pero para el resto de nosotros, esto es lo que los navegadores modernos tienen para ofrecer:
1. Animaciones y transiciones CSS
Las animaciones CSS finalmente están disponibles en todos los principales navegadores, incluso en IE (desde la versión 10). Hay dos formas de crear animaciones CSS. La primera es muy fácil, se hace animando los cambios de propiedades CSS con el transition declaración. Con las transiciones, puede crear efectos de desplazamiento o de mouse hacia abajo, o puede activar la animación cambiando el estilo de un elemento con JavaScript. Puedes ver la transición a continuación al pasar el cursor sobre el planeta; esto hará que el cohete se acerque.
La segunda forma de definir animaciones es un poco más complicada:implica la descripción de momentos específicos de la animación con la regla código>@keyframe. Esto le permite tener animaciones repetitivas que no dependen de las acciones del usuario o de JavaScript para activarse. Presiona Editar botón para ver el código.
.container{
width: 300px;
height:300px;
margin: 0 auto;
position:relative;
overflow:hidden;
}
.planet{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}
.rocket{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;
/* Chrome still requires the -webkit- prefix */
-webkit-animation:orbit 2s linear infinite;
animation:orbit 2s linear infinite;
transition:background-position 0.8s;
}
.container:hover .rocket{
background-position:80px center;
}
/* Define the keyframes of the animation */
@-webkit-keyframes orbit {
from {
-webkit-transform:rotate(0deg);}
to {
-webkit-transform:rotate(360deg);
}
}
@keyframes orbit {
from {
transform:rotate(0deg);
/* I am including the -webkit-transform properties, because
Chrome might start supporting keyframe without prefix in the future,
but we can't be certain whether it will support prefix-free transform
at the same time */
-webkit-transform:rotate(0deg);}
to {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
} <div class="container">
<div class="planet"></div>
<div class="rocket"></div>
</div> Hay mucho que aprender sobre las animaciones CSS, y le sugiero que comience con este artículo de la Red de desarrolladores de Mozilla (MDN). Si tiene curiosidad acerca de la compatibilidad del navegador, consulte esta tabla de compatibilidad.
2. Cálculo de valores con calc()
Otra función CSS nueva e impresionante es el calc() función. Te permite hacer cálculos aritméticos simples en CSS. Puede usarlo en cualquier lugar donde se requiera una longitud o un tamaño. Lo que es aún más genial es que puedes mezclar libremente diferentes unidades, como porcentajes y píxeles. Esto hace que muchos trucos de diseño que podría haber usado en el pasado queden obsoletos. ¿La mejor noticia? Funciona en IE9 y versiones posteriores, sin prefijos.
.container{
/* Calculate the width */
width: calc(100% - 40px);
background-color:#CDEBC4;
color:#6D8B64;
text-align:center;
padding:25px 0;
margin: 0 auto;
} <div class="container">
<p>This div has 20px on either side.</p>
</div>
Más información sobre el calc() función aquí, o vea una tabla de compatibilidad.
3. Selectores avanzados
En estos días, si asigna ID a los elementos solo para poder diseñarlos, probablemente lo esté haciendo mal. CSS 2.1 y CSS 3 introdujeron una serie de poderosos selectores que pueden hacer que sus diseños sean más limpios y sus hojas de estilo más impresionantes.
Estos son compatibles con todos los principales navegadores, incluidos IE9 y superiores. Presiona Editar para ver el código fuente del ejemplo.
/* Style the elements (nothing interesting here) */
p{
font-size: 16px;
width: 420px;
margin: 20px auto 0;
text-align:center;
}
.container{
width: 420px;
margin:50px auto 0;
overflow: hidden;
padding:5px;
}
.elem{
width:30px;
height:30px;
margin:4px;
background-color:#A0DFAC;
float:left;
}
.elem span{
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:2px solid #fff;
}
/* Selectors for matching the first letter and line: */
p::first-letter{
background-color: #666;
color: #FFF;
font-size: 24px;
font-style:normal;
display: inline-block;
padding: 0 5px;
border-radius: 3px;
margin-right: 2px;
font-family: serif;
}
p::first-line{
font-size: 18px;
text-transform: smallcaps;
font-style: italic;
text-decoration: underline;
}
/* Make the first and last elements purple */
.elem:first-child,
.elem:last-child{
background-color:#948bd8;
}
/* Make every other element rounded */
.elem:nth-child(odd){
border-radius:50%;
}
/* Make the sixth element red */
.elem:nth-child(6){
background-color:#cb6364;
}
/* Style the element which contains the span */
.elem:not(:empty){
background-color:#444;
position:relative;
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
/* Target elements by attribute */
.elem[data-foo=bar1]{
background-color:#aaa;
}
.elem[data-foo=bar2]{
background-color:#d7cb89;
}
/* The attribute value should start with bar. This matches both
of the above elements */
.elem[data-foo^=bar]{
width: 16px;
height: 16px;
margin: 11px;
}
/* The element that follows after the one with data-foo="bar2" attribute */
.elem[data-foo=bar2] + .elem{
background-color:#78ccd2;
} <p>This is a regular paragraph of text, which has a number of awesome CSS3 styles applied..</p>
<div class="container">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"><span></span></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem" data-foo="bar1"></div>
<div class="elem" data-foo="bar2"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div> Obtén más información sobre estos selectores aquí o echa un vistazo a los navegadores que los admiten.
4. Contenido generado y contadores
El contenido generado es una herramienta poderosa en manos de los desarrolladores, puesto a disposición por el ::before y ::after pseudo elementos. Esta característica le permite usar menos HTML para lograr los mismos diseños. Esto es especialmente beneficioso en los casos en los que necesita sombras de cuadro adicionales u otros elementos visuales que requieran tramos o divisiones adicionales. Al final, obtienes un HTML más mínimo y semánticamente correcto.
CSS3 también da acceso a los pseudo elementos a los contadores, que se pueden incrementar con una regla CSS. También pueden acceder a los atributos de los elementos principales que los contienen. Consulte la fuente del ejemplo a continuación.
.container{
/* Set a counter named cnt to 0 */
counter-reset: cnt;
position:relative;
text-align:center;
padding:20px 0;
width:420px;
height: 160px;
margin: 0 auto;
}
/* You can style pseudo elements and give them content,
as if they were real elements on the page */
.container::before{
display: block;
content:'Hover over these items:';
font-size:18px;
font-weight:bold;
text-align:center;
padding:15px;
}
.container span{
display:inline-block;
padding:2px 6px;
background-color:#78CCD2;
color:#186C72;
border-radius:4px;
margin:3px;
cursor:default;
}
/* Create a counter with a pseudo element */
.container span::after{
/* Every time this rule is executed, the
counter value is increased by 1 */
counter-increment: cnt;
/* Add the counter value as part of the content */
content:" #" counter(cnt);
display:inline-block;
padding:4px;
}
/* Pseudo elements can even access attributes of their parent element */
.container span::before{
position:absolute;
bottom:0;
left:0;
width:100%;
content:attr(data-title);
color:#666;
opacity:0;
/* Animate the transitions */
-webkit-transition:opacity 0.4s;
transition:opacity 0.4s;
}
.container span:hover::before{
opacity:1;
} <div class="container">
<span data-title="I have a wonderful title!">This is item</span>
<span data-title="These titles are shown only using CSS, no JavaScript is used!">This is item</span>
<span data-title="Hello there!">This is item</span>
<span data-title="Generated content is awesome!">This is item</span>
</div> El contenido generado es compatible en todas partes, incluido IE9 y versiones posteriores.
5. Gradientes
Los degradados brindan a los diseñadores web el poder de crear transiciones suaves entre colores sin tener que recurrir a las imágenes. Los gradientes de CSS también se ven muy bien en las pantallas de retina, porque se generan sobre la marcha. Pueden ser lineales o radial y se puede configurar para que se repita. Han existido durante algún tiempo, pero después de algunos cambios menores de sintaxis en los últimos meses, finalmente están disponibles en casi todas partes, ¡sin prefijos!
.container{
text-align:center;
padding:20px 0;
width:450px;
margin: 0 auto;
}
.container div{
width:100px;
height:100px;
display:inline-block;
margin:2px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD;
border-radius:2px;
color:#666;
vertical-align: top;
line-height: 230px;
font-size: 12px;
}
#el1{
background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
}
#el2{
background:radial-gradient(#77d19e,#46c17b);
}
#el3{
background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
}
#el4{
background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);
} <div class="container">
<div id="el1">Linear</div>
<div id="el2">Radial</div>
<div id="el3">Repeating Lin.</div>
<div id="el4">Repeating Rad.</div>
</div> Vea un tutorial detallado aquí y una tabla de compatibilidad aquí.
6. Fuentes web
¿Te imaginas que hubo un momento en que estábamos limitados a solo un puñado de fuentes "seguras para la web" y nada más? Es difícil de creer, dado que hoy en día tenemos servicios como Google Fonts y Typekit, que te permiten incrustar hermosas fuentes con solo incluir una hoja de estilo en tu página. Incluso hay fuentes de iconos como fontawesome, que contienen bonitos iconos vectoriales, en lugar de letras o números. Todo esto fue posible gracias a la regla code>@font-face, que le permite definir el nombre, las características y los archivos de origen de las fuentes, que luego puede consultar en su font /font-family declaraciones.
h1{
/* Using the custom font we've included in the HTML tab: */
font-family: Satisfy, cursive;
font-weight:normal;
font-size:24px;
padding-top: 60px;
} <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" /> <h1>This is my pretty webfont!</h1>
Tenga en cuenta que debido a las limitaciones de seguridad en los navegadores, no pude incrustar una fuente local en el editor en línea anterior, así que usé una de Google Webfonts en su lugar. Pero puedes ver un ejemplo de trabajo aquí.
Con algunas soluciones, las fuentes web funcionan en navegadores tan antiguos como IE6. Los dos servicios alojados que mencioné anteriormente manejan estos casos por usted, para que usted no tenga que hacerlo.
7. Tamaño de la caja
La principal causa de dolores de cabeza para los principiantes de CSS es el modelo de caja. Los organismos de estandarización probablemente hayan tenido sus razones, pero no parece nada intuitivo tener el ancho y alto CSS de un elemento afectado por su relleno y bordes. Esta pequeña (incorrecta) característica rompe los diseños y causa estragos, pero finalmente hay una manera de restaurar nuestra cordura usando el box-sizing regla. Puede establecerlo en border-box , que hace que los elementos se comporten exactamente como esperas. Compruébelo usted mismo:
.container{
text-align:center;
}
.container div{
/* Setting the box-sizing method: */
box-sizing:border-box;
/* Firefox still requires the -moz prefix */
-moz-box-sizing:border-box;
width:120px;
height:120px;
display:inline-block;
vertical-align:top;
}
/* Thanks to box-sizing, we can set whatever padding and border
we want, and the elements will still keep the same size */
#el1{
color:#524480;
background-color:#B2A4E0;
}
#el2{
padding:8px;
border:10px solid #9ec551;
background-color:#fff;
}
#el3{
padding:32px;
background-color:#ccc;
} <div class="container">
<div id="el1">Element 1</div>
<div id="el2">Element 2</div>
<div id="el3">Element 3</div>
</div> Obtén más información sobre la regla del tamaño de las cajas aquí o consulta la tabla de compatibilidad.
8. Imágenes de borde
El border-image La propiedad le permite mostrar bordes diseñados a medida alrededor de los elementos. Los bordes están contenidos en una sola imagen (sprite), y cada región de esa imagen corresponde a una parte diferente del borde. Esta es la imagen utilizada en el siguiente ejemplo.
p{
text-align:center;
padding:20px;
width:340px;
margin: 0 auto;
/* Set the border and border image properties */
border:30px solid transparent;
border-image:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round;
} <p>Say hello to a fancy border image!</p>
Para una mirada más profunda, consulte esta página de MDN y este artículo sobre trucos de CSS. Las imágenes de borde son compatibles con todos los principales navegadores e IE11.
9. Consultas de medios
Las consultas de medios son una necesidad absoluta si te tomas en serio el diseño web. Han existido por un tiempo, pero vale la pena mencionarlos, porque han transformado la forma en que construimos sitios web. Solía ser que tenía un sitio web regular, lo suficientemente ancho como para adaptarse a la resolución de monitor más pequeña utilizada en ese momento, y un sitio web móvil separado. Actualmente, construimos sitios que son receptivos y que se adaptan al tipo de dispositivo, orientación y resolución.
Las consultas de medios son sorprendentemente fáciles de usar:todo lo que necesita hacer es encerrar los estilos CSS en un bloque protegido por una regla de código>@medios. Cada bloque código>@media se activa cuando se cumplen una o más condiciones. Como ejemplo, intente cambiar el tamaño de esta página. También lo he incluido en el editor a continuación; intente eliminar el bloque de código>@media para ver qué sucede.
/* Style the main content and the sidebar */
.container{
width:900px;
margin: 0 auto;
overflow:hidden;
}
.main-section{
background-color:#CDEBC4;
color:#6D8B64;
width:520px;
float:left;
height:500px;
}
.sidebar{
background-color:#ccc;
width:350px;
float:right;
height:400px;
}
.container p{
padding-top:100px;
text-align:center;
}
.note{
text-align:center;
padding-top:60px;
font-style:italic;
}
/* This simple media query makes the column layout
linear on smaller screens */
@media (max-width:900px){
.container{
width:100%;
}
.main-section, .sidebar{
width:auto;
margin-bottom:20px;
float:none;
}
} <div class="container">
<aside class="sidebar"><p>This is the sidebar<p></aside>
<div class="main-section">
<p>The main content of the article goes here</p>
</div>
</div> La consulta de medios puede contener comprobaciones de la resolución y orientación del dispositivo, la profundidad de color, la densidad de píxeles y más. Lea un artículo detallado aquí y vea la tabla de compatibilidad.
10. Múltiples Fondos
Con múltiples fondos, los diseñadores pueden lograr efectos muy interesantes. Pueden apilar diferentes imágenes como fondos de un mismo elemento. Cada imagen (o capa) se puede mover y animar de forma independiente, como puede ver en la demostración a continuación (intente pasar el mouse sobre la imagen). Todas las reglas CSS relacionadas con el fondo ahora pueden tomar una lista de propiedades delimitadas por comas, cada una para la imagen de fondo específica:
.space{
/* Pass a comma separated list of backgrounds: */
background:url('https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png') no-repeat center 70px, url('https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg') no-repeat bottom center;
width:200px;
height:200px;
margin: 0 auto;
border-radius:3px;
/* Animate the positions of both of the backgrounds */
transition:background-position 1s;
}
.space:hover{
/* The same goes for properties like background-position and repeat */
background-position:35% 20px, top right;
} <div class="space"></div>
Para obtener más información sobre múltiples fondos, consulte aquí. La compatibilidad con los navegadores es muy buena:todas las versiones recientes admiten la regla (consulte la tabla).
11. Columnas CSS
Los diseños basados en columnas eran notoriamente difíciles de lograr en CSS. Por lo general, implicaba el uso de JavaScript o el procesamiento del lado del servidor que divide el contenido en diferentes elementos. Esto es innecesariamente complicado y quita un valioso tiempo de desarrollo de lo que realmente importa. Afortunadamente, ahora hay una forma de evitar esto usando el CSS columns regla:
.container{
width: 500px;
margin: 0 auto;
}
/* Creating columns is as simple as this: */
.container p{
-moz-columns:3;
-webkit-columns:3;
columns:3;
} <div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.</p>
</div> Hay un buen soporte para esta regla, aunque todavía requiere prefijos. Donde las cosas fallan es con el soporte de algunas de las otras reglas relacionadas con columnas y las diferencias entre navegadores en el manejo de casos de esquina.
12. Transformaciones CSS 3D
No hay nada más llamativo y lleno de atractivo visual que una impresionante demostración de CSS en 3D. Aunque su utilidad fuera de las demostraciones o los sitios de cartera es cuestionable, 3D CSS ofrece algunas características poderosas a los diseñadores y desarrolladores que pueden ganarse el corazón de los usuarios si se hace con la debida medida.
Navegue por el código fuente del siguiente ejemplo presionando Editar botón, para ver cómo se hizo.
.container{
/* How pronounced should the 3D effects be */
perspective: 800px;
-webkit-perspective: 800px;
background: radial-gradient(#e0e0e0, #aaa);
width:480px;
height:480px;
margin:0 auto;
border-radius:6px;
position:relative;
}
.iphone-front,
.iphone-back{
/* Enable 3D transforms */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/* We are using two separate divs for the front and back of the
phone. This will hide the divs when they are flipped, so that the
opposite side can be seen: */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width:200px;
height:333px;
position:absolute;
top:50%;
left:50%;
margin:-166px 0 0 -100px;
background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center;
/* Animate the transitions */
transition:0.8s;
}
.iphone-back{
/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
background-position:right center;
}
.container:hover .iphone-front{
/* When the container is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.container:hover .iphone-back{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
} <div class="container">
<div class="iphone-front"></div>
<div class="iphone-back"></div>
</div> Este código se modeló a partir de nuestro tutorial de formulario de inicio de sesión similar a Apple, que le aconsejo que lea. Si desea obtener más información sobre 3D CSS, eche un vistazo a esta introducción detallada. Si no necesita apuntar a IE antiguo, la compatibilidad con el navegador también es muy buena.
Otras menciones dignas
Hay otras características notables que vale la pena mencionar. Si aún no lo ha hecho, debe dejar de usar prefijos para border-radius y box-shadow . Ahora también puedes usar data-uri como imágenes de fondo en todos los navegadores. opacity también es compatible en todas partes, así como el muy útil background-size propiedad.
Todavía queda algo de tiempo antes de que llegue la compatibilidad entre navegadores para flexbox , código>@soportes, filtros y CSS masks , ¡pero estoy seguro de que la espera valdrá la pena!