CSS: La Guía Definitiva, 5ª Edición

Prefacio

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Si eres diseñador web o autor de documentos y te interesa el estilo sofisticado de las páginas, la mejora de la accesibilidad y el ahorro de tiempo y esfuerzo, este libro es para ti. Lo único que realmente necesitas saber antes de empezar el libro es HTML 4.0. Cuanto mejor conozcas HTML, mejor preparado estarás, pero no es un requisito. Necesitarás saber muy poco más para seguir este libro.

Esta quinta edición del libro se terminó a finales de 2022 y hace todo lo posible por reflejar el estado del CSS en ese momento. Todo lo que se cubre en detalle o bien tenía una amplia compatibilidad con los navegadores en el momento de escribir el libro o se sabía que iba a aparecer poco después de su publicación. Las funciones CSS que aún se estaban desarrollando o de las que se sabía que pronto tendrían soporte no se tratan aquí.

Convenciones utilizadas en este libro

En este libro se utilizan las siguientes convenciones tipográficas (pero asegúrate de leer "Convenciones de sintaxis de valores" para ver cómo se modifican algunas de ellas):

Cursiva

Indica nuevos términos, URL, direcciones de correo electrónico, nombres de archivo y extensiones de archivo.

Constant width

Se utiliza en los listados de programas, así como dentro de los párrafos para referirse a elementos del programa como nombres de variables o funciones, bases de datos, tipos de datos, variables de entorno, sentencias y palabras clave.

Constant width italic

Muestra el texto que debe sustituirse por valores proporcionados por el usuario o por valores determinados por el contexto.

Consejo

Este elemento significa un consejo o sugerencia.

Nota

Este elemento significa una nota general.

Advertencia

Este elemento indica una advertencia o precaución.

Convenciones de sintaxis de valores

A lo largo de este libro , los recuadros explican los detalles de una determinada propiedad CSS, incluidos los valores permitidos. Este contenido se ha reproducido prácticamente al pie de la letra a partir de las especificaciones CSS, pero conviene dar algunas explicaciones sobre la sintaxis.

Los valores permitidos para cada propiedad se enumeran con una sintaxis como la siguiente:

Valor: <family-name>#

Valor: <url> ‖ <color>

Valor: <url>? <color> [ / <color> ]?

Valor: [ <length> | thick | thin ]{1,4}

Valor: [ <background>, ]* <background-color>

Las palabras en cursiva entre < y > dan un tipo de valor, o una referencia a los valores de otra propiedad. Por ejemplo, la propiedad font acepta valores que originalmente pertenecen a la propiedad font-family. Esto se denota utilizando el texto <font-family>. Del mismo modo, si se admite un tipo de valor como un color, se representará utilizando <color>.

Las palabras que aparecen en constant width son palabras clave que deben aparecer literalmente, sin comillas. La barra oblicua (/) y la coma (,) también deben utilizarse literalmente.

Los componentes de una definición de valor pueden combinarse de numerosas formas:

• Dos o más palabras clave juntas, separadas únicamente por un espacio, significan que todas ellas deben aparecer en el orden indicado. Por ejemplo, help me significaría que la propiedad debe utilizar esas palabras clave en ese orden.

• Si una barra vertical separa alternativas (X | Y), debe aparecer cualquiera de ellas, pero sólo una. Dado [ X | Y | Z ] cualquiera de X, Yo Z está permitida.

• Una doble barra vertical (X ‖ Y) significa que X, Yo ambos, pero pueden aparecer en cualquier orden. Así: X, Y, X Yy Y X son todas interpretaciones válidas.

• Un doble ampersand (X && Y) significa tanto X y Y deben aparecer, aunque pueden aparecer en cualquier orden. Así: X Y o Y X son ambas interpretaciones válidas.

• Los corchetes ([...]) sirven para agrupar cosas en . Así, [please ‖ help ‖ me] do this significa que las palabras please, help, y me pueden aparecer en cualquier orden, aunque cada una sólo aparece una vez. Las palabras do this deben aparecer siempre, en ese orden. He aquí algunos ejemplos: please help me do this, help me please do this, me please help do this.

Cada componente o grupo entre corchetes puede (o no) ir seguido de uno de estosmodificadores:

• Un asterisco (*) indica que el valor o grupo entre corchetes precedente se repite cero o más veces. Así, bucket* significa que la palabra bucket puede utilizarse cualquier número de veces, incluido cero. No hay límite superior definido para el número de veces que puede utilizarse.

• Un signo más (+) indica que el valor o grupo entre corchetes precedente se repite una o más veces. Así, mop+ significa que la palabra mop debe utilizarse al menos una vez, y potencialmente muchas más veces.

• Un signo de almohadilla (#), formalmente llamado octógono, indica que el valor o grupo entre corchetes precedente se repite una o más veces, separado por comas según sea necesario. Así, floor# puede ser floor o floor, floor, floor, y así sucesivamente. Se suele utilizar junto con grupos o tipos de valores entre corchetes.

• Un signo de interrogación (?) en indica que el valor o grupo entre corchetes precedente es opcional. Por ejemplo, [pine tree]? significa que no es necesario utilizar las palabras pine tree (aunque deben aparecer en ese orden si se utilizan).

• Un signo de exclamación (!) en indica que el valor o grupo entre corchetes precedente es obligatorio y, por tanto, debe dar lugar al menos a un valor, aunque la sintaxis parezca indicar lo contrario. Por ejemplo, [ what? is? happening? ]! debe ser al menos uno de los tres términos marcados como opcionales.

• Un par de números entre llaves ({M,N}) indica que el valor o grupo entre llaves precedente se repite al menos M y como máximo N veces. Por ejemplo, ha{1,3} significa que puede haber una, dos o tres instancias de la palabra ha.

Estos son algunos ejemplos:

give ‖ me ‖ liberty

Debe utilizarse al menos una de las tres palabras, y pueden utilizarse en cualquier orden. Por ejemplo, give liberty, give me, liberty me give, y give me liberty son todas interpretaciones válidas.

[ I | am ]? the ‖ walrus

Se puede utilizar la palabra I o am, pero no ambas, y el uso de cualquiera de ellas es opcional. Además, the o walrus, o ambas, deben ir a continuación en cualquier orden. Así, podrías construir I the walrus, am walrus the, am the, I walrus, walrus the, etc.

koo+ ka-choo

Una o más instancias de koo deben ir seguidas de ka-choo. Por tanto, koo koo ka-choo, koo koo koo ka-choo y koo ka-choo son todos legales. El número de koos es potencialmente infinito, aunque seguramente habrá límites específicos para cada implementación.

I really{1,4}? [ love | hate ] [ Microsoft | Firefox | Opera | Safari | Chrome ]

El expresador de opiniones polivalente de los diseñadores web. Puede interpretarse como I love Firefox, I really love Microsoft, y expresiones similares. Se pueden utilizar de cero a cuatro reallys , aunque no pueden ir separadas por comas. También puedes elegir entre love y hate, lo que realmente parece una especie de metáfora.

It’s a [ mad ]# world

Esto da la oportunidad de poner tantos madseparados por comas como sea posible, con un mínimo de un mad. Si sólo hay un mad, no se añade ninguna coma. Así: It’s a mad world y It’s a mad, mad, mad, mad, mad world son ambos resultados válidos.

[ [ Alpha ‖ Baker ‖ Cray ], ]{2,3} and Delphi

De dos a tres de Alpha, Baker, y Delta deben ir seguidos de and Delphi. Un resultado posible sería Cray, Alpha, and Delphi. En este caso, la coma se coloca debido a su posición dentro de los grupos de corchetes anidados. (Algunas versiones antiguas de CSS aplicaban la separación por comas de esta forma, en lugar de mediante el modificador # ).

Utilizar ejemplos de código

Siempre que en encuentres un icono parecido a significa que hay un ejemplo de código asociado. Los ejemplos en vivo están disponibles en https://meyerweb.github.io/csstdg5figs. Si estás leyendo este libro en un dispositivo con conexión a Internet, puedes hacer clic en el icono para ir directamente a una versión en vivo del ejemplo de código al que se hace referencia.

El material complementario -en forma de archivos HTML, CSS e imágenes que se utilizaron para producir casi todas las figuras de este libro- está disponible para su descarga en https://github.com/meyerweb/csstdg5figs. Asegúrate de leer el archivo README.md del repositorio para cualquier nota relativa a su contenido.

Si tienes una pregunta técnica o un problema al utilizar los ejemplos de código, envía un correo electrónico a [e-mail].

Este libro está aquí para ayudarte a hacer tu trabajo. En general, si se ofrece código de ejemplo con este libro, puedes utilizarlo en tus programas y documentación. No es necesario que te pongas en contacto con nosotros para pedirnos permiso, a menos que estés reproduciendo una parte importante del código. Por ejemplo, escribir un programa que utilice varios trozos de código de este libro no requiere permiso. Vender o distribuir ejemplos de los libros de O'Reilly sí requiere permiso. Responder a una pregunta citando este libro y el código de ejemplo no requiere permiso. Incorporar una cantidad significativa de código de ejemplo de este libro en la documentación de tu producto sí requiere permiso.

Agradecemos la atribución, pero en general no la exigimos. Una atribución suele incluir el título, el autor, la editorial y el ISBN. Por ejemplo "CSS: La Guía Definitiva de Eric A. Meyer y Estelle Weyl (O'Reilly). Copyright 2023 Eric A. Meyer y Estelle Weyl, 978-1-098-11761-0".

Si crees que el uso que haces de los ejemplos de código no se ajusta al uso legítimo o al permiso concedido anteriormente, no dudes en ponerte en contacto con nosotros en [e-mail].

Aprendizaje en línea O'Reilly

Nota

Durante más de 40 años, O'Reilly Media ha proporcionado formación tecnológica y empresarial, conocimientos y perspectivas para ayudar a las empresas a alcanzar el éxito.

Nuestra red única de expertos e innovadores comparten sus conocimientos y experiencia a través de libros, artículos y nuestra plataforma de aprendizaje online. La plataforma de aprendizaje en línea de O'Reilly te ofrece acceso bajo demanda a cursos de formación en directo, rutas de aprendizaje en profundidad, entornos de codificación interactivos y una amplia colección de textos y vídeos de O'Reilly y de más de 200 editoriales. Para más información, visita https://oreilly.com.

Cómo contactar con nosotros

Dirige tus comentarios y preguntas sobre este libro a la editorial:

• O'Reilly Media, Inc.
• 1005 Gravenstein Highway Norte
• Sebastopol, CA 95472
• 800-998-9938 (en Estados Unidos o Canadá)
• 707-829-0515 (internacional o local)
• 707-829-0104 (fax)

Tenemos una página web para este libro, donde se enumeran erratas, ejemplos y cualquier información adicional. Puedes acceder a esta página en https://oreil.ly/css-the-definitive-guide-5e.

Envía un correo electrónico a [e-mail] para comentar o hacer preguntas técnicas sobre este libro.

Para obtener noticias e información sobre nuestros libros y cursos, visita https://oreilly.com.

Encuéntranos en LinkedIn: https://linkedin.com/company/oreilly-media.

Síguenos en Twitter: https://twitter.com/oreillymedia.

Míranos en YouTube: https://youtube.com/oreillymedia.

Agradecimientos

Eric Meyer

En primer lugar, quiero dar las gracias a todos los revisores técnicos de esta edición, que prestaron su tiempo y experiencia a la ardua tarea de descubrir todos los lugares en los que me había equivocado, y por menos recompensa de la que merecían. Alfabéticamente, por apellido: Ire Aderinokun, Rachel Andrew, Adam Argyle, Amelia Bellamy-Royds, Chen Hui Jing, Stephanie Eckles, EvaFerreira, Mandy Michael, Schalk Neethling, Jason Pamental, Janelle Pizarro, Eric Portis, Miriam Suzanne, Lea Verou y Dan Wilson. Cualquier error es culpa mía, no suya.

Gracias también a todos los revisores técnicos de ediciones anteriores, que son demasiados para nombrarlos aquí, y a todas las personas que me han ayudado a comprender diversos aspectos del CSS a lo largo de los años, que también son demasiadas para nombrarlas aquí. Si alguna vez me has explicado algo de CSS, escribe tu nombre en el siguiente espacio en blanco: _______________________, tienes mi gratitud.

Gracias a todos los miembros del Grupo de Trabajo CSS, pasados y presentes, que han guiado un lenguaje asombroso hasta cotas asombrosas... incluso cuando vuestro trabajo significa que nos enfrentaremos a un verdadero dilema de producción para la próxima edición de este libro, que ya está superando los límites de lo que la tecnología de impresión puede razonablemente manejar.

Gracias a todas las personas que mantienen la Red de Desarrolladores de Mozilla (MDN) en funcionamiento y actualizada.

Un agradecimiento especial a toda la buena gente de Open Web Docs por su trabajo en MDN, y por pedirme que forme parte de su comité directivo.

A mi coautora, Estelle, gracias por todas tus aportaciones, experiencia y empuje para hacer lo que era necesario.

A todos los amigos, colegas, compañeros de trabajo, conocidos y transeúntes que han dado cabida a mis extraños entusiasmos y mi extraña conducta, gracias por vuestra comprensión, paciencia y amabilidad.

Y como siempre, mi gratitud sin límites a mi familia: mi esposa, Kat, y mis hijos, Carolyn, Rebecca z''l y Joshua. Sois el hogar que me cobija, los soles de mi cielo y las estrellas por las que me guío. Gracias por todo lo que me habéis enseñado.

Cleveland Heights, OH

4 de diciembre de 2022

Estelle Weyl

Me gustaría dar las gracias a todos los que han trabajado para hacer de CSS lo que es hoy y a todos los que han ayudado a mejorar la diversidad y la inclusión en la tecnología.

Muchas personas trabajan incansablemente con los proveedores y desarrolladores de navegadores en la redacción de las especificaciones CSS. Sin los miembros del Grupo de Trabajo CSS -pasados, presentes y futuros- no tendríamos especificaciones, normas nicompatibilidad entre navegadores. Me asombra el proceso de reflexión que se lleva a cabo en cada propiedad y valor CSS que se añade u omite de la especificación. Personas como Tab Atkins, Elika Etimad, Dave Baron, Léonie Watson y Greg Whitworth no sólo trabajan en la especificación, sino que también dedican su tiempo a responder preguntas y explicar matices al público general de CSS, especialmente a mí.

También doy las gracias a todos aquellos que, participen o no en el Grupo de Trabajo CSS, profundizan en las características de CSS y ayudan a traducir la especificación para el resto de nosotros, como Sarah Drasner, Val Head, Sara Souidan, Chris Coyier, Jen Simmons y Rachel Andrew. Además, doy las gracias a las personas que crean herramientas que facilitan la vida de todos los desarrolladores de CSS, especialmente a Alexis Deveria por crear y mantener la herramienta Can I Use.

También agradezco a todos aquellos que han contribuido con su tiempo y esfuerzo a mejorar la diversidad y la inclusión en todos los sectores de la comunidad de desarrolladores. Sí, el CSS es genial. Pero es importante trabajar con gente estupenda en una comunidad estupenda.

Cuando asistí a mi primera conferencia sobre tecnología en 2007, el cartel estaba formado por un 93% de hombres y un 100% de blancos. El público tenía algo menos de diversidad de género y sólo un poco más de diversidad étnica. Había elegido esa conferencia porque la alineación era más diversa que la mayoría: de hecho, había una mujer en ella. Mirando alrededor de la sala, supe que las cosas tenían que cambiar, y me di cuenta de que era algo que tenía que hacer. Lo que no sabía entonces era cuántos héroes anónimos conocería en los 10 años siguientes trabajando por la diversidad y la inclusión en todos los ámbitos del sector tecnológico y de la vida en general.

Hay demasiadas personas -que trabajan incansablemente, en silencio y a menudo con poco o ningún reconocimiento- para nombrarlas a todas, pero me gustaría destacar a algunas. No puedo expresar el impacto positivo que han tenido personas como Erica Stanley, de Women Who Code Atlanta, Carina Zona, de Callback Women, y Jenn Mei Wu, de Oakland Maker Space. Grupos como The Last Mile, Black Girls Code, Girls Incorporated, Sisters Code y tantos otros me inspiraron para crear una lista de Feeding the Diversity Pipeline para ayudar a garantizar que el camino hacia una carrera en el desarrollo web no es sólo para los privilegiados.

Gracias a todos. Gracias a todos. Gracias a vuestros esfuerzos, se ha hecho más de lo que jamás hubiera podido imaginar sentado en aquella conferencia hace 10 años.

San Francisco, CA

14 de febrero de 2023