CSS3 vs CSS: las hojas de estilo en cascada o CSS son un elemento clave del diseño web. Como desarrollador web o diseñador, debe tener un profundo conocimiento de CSS, especialmente la diferencia entre CSS3 y CSS.

Es posible que haya escuchado o encontrado el término CSS3 si ha leído sobre desarrollo web o diseño web. Si alguna vez pensó en lo diferente que podría ser entre CSS3 y CSS, aquí es donde se resolverán todas sus dudas: ambas son iguales.

Así es: CSS3 vs CSS son tan diferentes entre sí como HTML y HTML5. CSS3 es simplemente la última iteración de CSS. Las personas que hablan de codificar CSS en este momento en realidad solo se refieren a CSS3.

Tanto HTML5 como CSS3 generalmente se han convertido en palabras de moda, con significados más allá de sus tecnologías reales. Simbolizan el cumplimiento de ciertos estándares básicos en el desarrollo web en lugar de utilizar software propietario. En su mayor parte, la exageración en torno a estas palabras de moda ya se ha calmado. La mayoría de las empresas, incluso las que juran mantener todo en casa, estarían de acuerdo en que cumplir con estos estándares básicos hace la vida mucho más fácil para todos.

Ahora, ha pasado bastante tiempo desde que CSS3 fue lanzado y aceptado por todos. Trajo muchas cosas geniales a la industria y marcó un gran paso adelante para el desarrollo web en general. La versión anterior, CSS2, se lanzó en 1998. Eso fue hace casi 20 años. La única revisión que recibió después de su lanzamiento fue en 2011, llamada CSS2.1. Incluso con la revisión, la mayoría de los expertos ya habían comenzado a decir que CSS3 es inevitable. CSS3 viene con una serie de características y capacidades que se habían vuelto completamente necesarias para entonces.

Lo que quizás no haya sabido sobre CSS3 es que comenzó a desarrollarse solo un año después de que se presentó su versión anterior. Esto significa que el W3C estaba trabajando en la versión mejorada desde 1999. Tomó más de 12 años lanzar la primera versión estable de CSS3.

Hay grandes diferencias entre CSS3 y CSS (que veremos pronto). Pero el hecho es que los navegadores web ya estaban listos para las adiciones a CSS3 cuando se lanzó. Como resultado, se adaptaron bastante rápido al nuevo lanzamiento. Todos los principales navegadores web ahora admiten CSS3, ¡incluso Internet Explorer!

Por supuesto, el W3C aún continúa desarrollando CSS3 y HTML5, por lo que es poco probable una versión final. Para ser justos, una versión final tampoco es una necesidad en este momento, dado lo rápido que progresa Internet. Con los requisitos web y la propia industria creciendo y cambiando tan rápidamente, la codificación tiene que avanzar tan rápido, si no más.

CSS3 vs Infografía CSS

CSS3 vs CSS Diferencias definidas

Ahora que conoce un poco sobre el fondo detrás de CSS3, echemos un vistazo más de cerca a lo que cambió. Quizás la mayor diferencia entre CSS3 y la versión anterior que reemplazó es la separación del módulo. En CSS2, todo era una sola especificación grande que definía diferentes características. Sin embargo, CSS3 cambió esto al traer varios documentos llamados módulos. Cada módulo tiene sus propias capacidades nuevas que no afectan la compatibilidad de la versión anterior de CSS estable.

Preguntas de los medios

Hay muchos módulos disponibles, pero solo cuatro son publicados como recomendaciones formales por W3C. Estos cuatro grandes módulos son los siguientes:

  1. Color, publicado 2011
  2. Selectores Nivel 3, publicado 2011
  3. Espacios de nombres, publicados 201
  4. Consultas de medios, publicadas 2012

Entre estos, el módulo más importante son las consultas de medios. De hecho, este módulo podría ser la adición más importante que CSS3 trajo a CSS en general. Las consultas de medios son bastante simples: permite la aplicación de ciertas condiciones a diferentes hojas de estilo. Esto permite que los sitios web sean fluidos o 'receptivos' a diferentes tamaños de pantalla. En otras palabras, los sitios web pueden ajustar sus dimensiones y elementos para adaptarse a diferentes dispositivos. Hoy en día, el diseño web receptivo es probablemente la palabra de moda más importante. Dado que la mayoría del uso de Internet ahora está en dispositivos móviles, el diseño receptivo es absolutamente esencial y las consultas de los medios ayudan a lograr esto. El módulo también permite a los desarrolladores adaptar los sitios web a varias resoluciones sin cambiar o eliminar contenido.

Las consultas de medios también son bastante fáciles de resolver y agregar. Una vez que los use varias veces, puede deducir el resto. Aquí hay algunas líneas de código de ejemplo:

@media screen y (ancho máximo: 600px) (

fondo: #FFF;

)

Parece bastante simple, ¿no? Con estas dos líneas de código, puede habilitar el estilo para pantallas con un máximo de 600 píxeles de ancho. Esto significa que todas las pantallas con un ancho máximo de 600 píxeles mostrarán un fondo blanco. El ancho máximo es solo una de las varias condiciones que podría aplicar a una hoja de estilo en CSS3. Otro es el ancho máximo del dispositivo. Esta es la resolución de la pantalla y no el área de visualización. Además, se puede establecer un valor mínimo en lugar del máximo; solo use 'min' en lugar de 'max'. También puede combinar los dos, como a continuación:

@media screen y (ancho mínimo: 600 px) y (ancho máximo: 900 px) (

fondo: #FFF;

)

Aquí, el estilo solo se aplica a pantallas con un ancho de visualización de 600-900 píxeles. CSS3 viene con algunas hojas de estilo predefinidas para dispositivos móviles populares, como el iPad y iPhone de Apple. Éstos son algunos de ellos:

Ya debería estar bastante claro lo importantes que son las consultas de medios. Este módulo es muy útil para los desarrolladores que desean crear un diseño web receptivo con la menor cantidad de codificación posible.

Bordes redondeados

CSS3 también viene con algunas consideraciones de diseño web realmente clave. Por ejemplo, los bordes se pueden redondear sin hacks con CSS3 que introduce bordes redondeados. Esta fue una gran ventaja para los desarrolladores web y diseñadores que luchaban con los bordes CSS antes. No es sorprendente que algunas de estas características aún no funcionen en versiones antiguas de Internet Explorer. El único código adicional que necesita agregar a la clase específica dentro de la hoja de estilo es, por ejemplo:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

borde: 2px sólido # 897048;

Por lo tanto, CSS3 hace la vida mucho más fácil para el desarrollador y diseñador web. El lanzamiento también vino con gradientes, que sorprendentemente no estaba disponible en lanzamientos anteriores.

Cursos recomendados

  • Capacitación en línea sobre servicios web en Java
  • Desarrollo profesional de juegos en entrenamiento C ++
  • Programa de piratería ética
  • Paquete de entrenamiento Vegas Pro 13

Imágenes de borde, sombras de texto

Otros elementos que se agregaron con CSS3 pero que faltaban en versiones anteriores incluían imágenes de borde y sombras de cuadro / texto. CSS3 hizo las cosas mucho más simples, eliminando la necesidad de agregar hacks para cualquiera de los elementos de estilo comunes anteriores. Por ejemplo, aquí está la línea solitaria de código para agregar sombras de texto:

sombra de texto: 2px 2px 2px # ddccb5;

Columnas

CSS3 también simplificó cómo agregar columnas al contenido. Todo lo que necesita hacer ahora es agregar cuatro líneas de código:

  1. recuento de columnas
  2. ancho de columna
  3. hueco de columna
  4. regla de columna

Múltiples fondos

La última versión de CSS también agregó la capacidad de introducir directamente múltiples fondos de CSS en lugar de usar hacks indirectos como antes. El código es increíblemente simple de recordar y escribir, y también es muy importante para crear elementos modernos de diseño web. Aquí hay un ejemplo:

.multiplebackgrounds (

altura: 100 px;

ancho: 200 px;

acolchado: 20px;

fondo: url (top.gif) arriba a la derecha sin repetición,

url (bottom.gif) arriba a la izquierda repetir-y,

url (middle.gif) fondo repetir-z;

)

Prefijos de vendedor

Los prefijos de proveedor se usaban con frecuencia durante el tiempo en que CSS3 acababa de lanzarse. Ayudaron a los navegadores a interpretar el código CSS. Están acostumbrados hasta el día de hoy, en caso de que su navegador web no pueda leer el código. Estos son los prefijos de proveedor para los principales navegadores:

  • -moz- : Firefox
  • -webkit- : navegadores Webkit como Apple Safari y Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

El prefijo de Opera también se ha vuelto redundante desde que la compañía cambió su navegador móvil y de escritorio a la plataforma Webkit desde su motor de renderizado Presto. Aunque el prefijo del proveedor continúa usándose hasta cierto punto, en este punto ha desaparecido principalmente.

Pseudo-clases agregadas

Con el adicional de CSS3, también obtuvimos muchas pseudo-clases adicionales, incluidas las estructurales para la orientación de elementos en función de la posición de su documento y la relación con otros elementos diferentes. Éstos son algunos de ellos:

  • : root apunta al elemento raíz del documento
  • : no (s) se dirige a elementos que no coinciden con los selectores especificados en (s)
  • : primer hijo se dirige al primer hijo en un contenedor independientemente del tipo de elemento
  • : el primer tipo apunta al primer tipo de elemento especificado dentro de un elemento primario
  • : nth-child (n) usa valores numéricos dentro de (n) para seleccionar elementos secundarios con respecto a su posición en el elemento primario. Por ejemplo, podría usar esto para agregar colores de fondo alternativos a los comentarios del blog
  • : elementos de destino vacíos que no tienen texto o elementos secundarios, como elementos vacíos como
  • : only-child se dirige a elementos en un árbol de documentos que es el único elemento hijo dentro del padre

Nuevos selectores CSS3

CSS3 ofrece varias formas de escribir reglas CSS a través de los nuevos selectores, un nuevo combinatorio y pseudoelementos: aquí están los tres nuevos selectores de atributos:

  • Para coincidencias exactas, elemento (foo = "bar")
  • Para hacer coincidir un elemento con un atributo llamado foo que comienza con 'bar', element (foo $ = ”bar”)
  • Para hacer coincidir un elemento con un atributo llamado foo que termina con 'bar', element (foo * = ”bar”)

CSS3 viene con varias nuevas pseudo-clases, algunas de las cuales se han discutido anteriormente. Aquí hay algunos más:

  • : nth-last-child (n) coincide con los elementos secundarios exactos del último
  • : enésimo tipo (n) coincide con elementos hermanos que tienen el mismo nombre antes que ellos en el árbol de documentos
  • : nth-last-of-type (n) coincide con elementos hermanos que tienen el mismo nombre desde abajo
  • : el último tipo apunta al último tipo de elemento especificado dentro de un elemento primario
  • : solo de tipo se dirige al elemento del cual es el único tipo
  • : elementos de destino objetivo que está dirigido por el URI de referencia
  • : enabled coincide con el elemento cuando está activado
  • : disabled coincide con el elemento cuando está desactivado
  • : marcado se dirige al elemento cuando se marca a través de una casilla de verificación o botón de radio

Un nuevo combinador

CSS3 también viene con un nuevo combinador: elementA ~ elementB

Este nuevo combinador coincide cuando el elemento A es seguido después en algún lugar por el elemento B, pero no inmediatamente después.

Nuevas propiedades de estilo de caja

CSS3 presenta el mismo modelo de caja que la versión anterior, pero con algunas nuevas propiedades de estilo que lo ayudan a diseñar bordes y fondos de sus cajas. Las nuevas propiedades de fondo en CSS3 son:

  • clip de fondo

Esta propiedad se utiliza para definir cómo recortar una imagen de fondo. Las dimensiones de recorte predeterminadas son el cuadro de borde, pero puede cambiarlo al cuadro de contenido o al cuadro de relleno.

  • origen de fondo

Esta propiedad particular se usa para determinar si el fondo debe colocarse en el cuadro de borde, el cuadro de contenido o el cuadro de relleno.

  • tamaño de fondo

Esta propiedad permite al desarrollador indicar el tamaño de la imagen de fondo y estirar imágenes más pequeñas para ajustar la página.

CSS3 también cambió algunas de las propiedades de estilo de fondo existentes. Aquí hay un vistazo a los cambios:

  • repetición de fondo

Esta propiedad ahora viene con dos valores nuevos: redondo y espacio. Round reescala la imagen para colocarla en mosaico varias veces en un cuadro. El espacio espacia uniformemente la imagen en mosaico dentro del cuadro sin recortar.

  • adjunto de fondo

La propiedad no incluye un valor 'local' para que el fondo se desplace con el contenido del elemento en caso de que el elemento tenga una barra de desplazamiento.

Nuevas propiedades de borde

CSS3 permite que los bordes se diseñen como dobles, sólidos, discontinuos o incluso como una imagen. Las imágenes de borde son una adición interesante: te permiten crear una imagen de los cuatro bordes y luego decirle a CSS que aplique la imagen a los bordes. Estas son algunas de las nuevas propiedades de borde que vienen con CSS3:

  • radio-borde, radio-borde-inferior-derecho, radio-borde-superior-derecho, radio-borde-superior-izquierda, radio-borde-inferior-izquierda-radio le permiten crear bordes redondeados
  • border-image-source le permite especificar un archivo fuente de imagen en lugar de usar estilos de borde predefinidos
  • border-image-slice representa desplazamientos internos desde los bordes de las imágenes de borde
  • border-image-width define el valor de ancho para su imagen de borde
  • border-image-outset especifica la cantidad más allá del cuadro de borde al que se extiende la imagen
  • border-image-stretch define el mosaico o escala de las partes media y lateral de la imagen del borde

Conclusión: CSS3 vs CSS

Aprenderá mucho más sobre CSS3 a medida que codifique más. Pero hay una advertencia: no puede dominar CSS3 a menos que conozca CSS. Aprender CSS3 implica desarrollar su comprensión y experiencia con CSS. Si no conoce CSS, debe aprenderlo desde arriba junto con CSS3. Lo bueno es que si no está familiarizado con CSS, debería ser más fácil agrupar el aprendizaje CSS3 vs CSS juntos para que sea más fácil y rápido.

Artículos recomendados

Aquí hay algunos artículos que lo ayudarán a obtener más detalles sobre CSS3 vs CSS, así que simplemente vaya al enlace.

  1. CSS vs HTML
  2. Emocionante saber el CSS Flexbox Essentials para principiantes
  3. HTML5 vs JavaScript Lo mejor para aprender
  4. CSS vs CSS3: diferencias

Categoría:

Desarrollo de software