La web moderna se compone de varios aspectos, está el técnico, el funcional y el estético, cada uno de estos aspectos es importante en la misma medida que los otros, sin embargo cuando una persona es más afín a uno de ellos tiende a descuidar los demás.
En este orden de ideas cuando una persona está más vinculada al aspecto técnico, generalmente descuida el aspecto estético, donde el aspecto funcional es un cruce entre ambos, ya que no todo lo que es muy estético será funcional, y el hecho que utilicemos todas las últimas tecnologías tampoco hacen que una web o un proyecto lo sean.
El CSS es la manera en que podemos incorporar la parte estética en la web de una forma amigable para el desarrollador, y también sirve como lenguaje universal para comunicarnos con diseñadores de experiencia de usuario y Front-End, ya que es la forma de darle un aspecto a cualquier sitio web.
Ventajas de utilizar CSS
Navegadores modernos
En los primeros días de la web moderna, estamos hablando de los años 90 existían pocas opciones de navegadores web incluso algunos siendo de pago, pero lo que más podemos recordar seguramente era la guerra de Internet Explorer y Netscape, esto dio un impulso para que se tomara en cuenta el aspecto funcional, sin embargo al estar en guerra significaba que cada navegador tenía sus reglas y esto hacia la vida imposible para el desarrollador web. En la actualidad tenemos muchas opciones de navegadores, y en su gran mayoría son gratuitos para el usuario, los más importantes son:
![css3-fundamentos-2.jpg]()
Cada navegador pertenece a diferentes desarrolladores, y son responsables de interpretar el HTML y el CSS por lo que cada uno debe implementar los estándares de la W3C, a pesar de esto no todos los navegadores se comportan de la misma forma con la misma instrucción CSS. Esto último se debe al motor que utilizan, veamos que motor utiliza cada uno:
Esta información es muy importante, porque no solo son los navegadores de escritorio los que utilizan estos motores, también los navegadores móviles, los clientes como los manejadores de e-mail, y hasta algunas aplicaciones. Si conocemos el motor podemos buscar de una forma más específica como poder tener un acercamiento al aspecto técnico que los regula.
Viejos navegadores
Hasta ahora hemos hablado de las opciones de navegadores más populares del mercado, sin embargo no hemos indagado en el detalle de las versiones de los mismos. Cada vez que hay un cambio en la implementación en el estándar de CSS cada navegador usualmente se actualiza para incorporar el cambio o las nuevas funcionalidades. Esto hace que las versiones viejas queden relegadas al pasado y por lo tanto su nivel de compatibilidad sea menor.
Lo que sucede es que no todos los usuarios están en la capacidad de actualizar por muchas razones, falta de permisos, incompatibilidad con aplicaciones importantes en su sistema, o hasta por motivos de seguridad de la empresa en las cuales trabajan, quienes tienen que probar los nuevos navegadores con los sistemas de la misma.
Esto hace que tengamos webs muy modernas que tal vez no funcionen en los viejos navegadores, es por ello que debemos tomar en precaución este aspecto durante la construcción de nuestros sitios.
El caso más incómodo
Un apartado muy necesario es hablar de Internet Explorer, y no para hablar solo de las cosas malas, ya que pensamos que esta gran empresa americana ha contribuido de forma espectacular al desarrollo de la computación y la informática a nivel mundial e histórico.
![css3-fundamentos-3.jpg]()
Pero es quizás su importancia la que ha hecho que su navegador sea uno de los casos más incómodos de manejar, solo en versiones más recientes como la actual, que es la versión 11 que se ha tenido un avance en la interpretación estándar de CSS y JavaScript, pero en versiones anteriores como por ejemplo la 8, la 7 o la muy infame 6, se tenía que hacer versiones de los sitios especialmente para que se pudieran mostrar en estos navegadores, y eso no es lo peor, si no que muchas veces había que sacrificar estética y funcionalidad solo para hacer que nuestros proyectos fuesen viables a nivel técnico.
Aquí los más jóvenes pudieran pensar por qué seguían desarrollando para esos navegadores, y la respuesta es simple, a pesar de todo Internet Explorer es uno de los navegadores más utilizados a nivel mundial debido a que viene integrado en Windows por defecto el cual es el sistema operativo más utilizado también.
Recientemente este 2015 fue anunciado que este navegador será descontinuado, sin embargo su sucesor aún no ha sido desvelado de forma completa y ya cuando sea puesto en funcionamiento de forma comercial podremos ver si continuaran los problemas antiguos o no.
CSS más que estilos
Todos estos conocimientos son necesarios, podemos saber mucho de las instrucciones CSS pero si no sabemos el trasfondo podemos sufrir, ya sea desde hacer una implementación con las mejores prácticas hasta problemas con clientes que no ven lo mismo que vemos nosotros, todo por utilizar una versión en particular de un navegador. Actualmente existen marcos de trabajo que nos ayudan a sobreponernos de todas estas adversidades, sin embargo cuando necesitamos algo muy específico, generalmente necesitamos realizar esa funcionalidad desde cero y es ahí donde necesitamos saber los fundamentos del CSS.
Finalizando este tutorial pudimos ver entonces que CSS es mucho más que un lenguaje simple y es mucho más que estilos, podemos decir que es un componente clave base para nuestras páginas web y tiene que ver con muchos aspectos, como por ejemplo todo lo que hemos visto de navegadores, los motores e incluso los problemas de compatibilidad.
En este orden de ideas cuando una persona está más vinculada al aspecto técnico, generalmente descuida el aspecto estético, donde el aspecto funcional es un cruce entre ambos, ya que no todo lo que es muy estético será funcional, y el hecho que utilicemos todas las últimas tecnologías tampoco hacen que una web o un proyecto lo sean.
El CSS es la manera en que podemos incorporar la parte estética en la web de una forma amigable para el desarrollador, y también sirve como lenguaje universal para comunicarnos con diseñadores de experiencia de usuario y Front-End, ya que es la forma de darle un aspecto a cualquier sitio web.
¿Qué es CSS?
CSS es un lenguaje sencillo que se utiliza para definir estilos que se pueden aplicar dentro de los documentos HTML, al mencionar la palabra estilos nos referimos a que podemos controlar desde la forma en que se ven las fuentes de una web, hasta la implementación de cursores de mouse, colores, imágenes, disposición en pantalla, etc.
CSS es un estándar y está bajo la responsabilidad de la W3C, por lo que cada navegador que tiene soporte para CSS debería funcionar igual si se apegan a las instrucciones dictadas por esta institución.
CSS es un estándar y está bajo la responsabilidad de la W3C, por lo que cada navegador que tiene soporte para CSS debería funcionar igual si se apegan a las instrucciones dictadas por esta institución.
¿Qué es CSS3?
CSS3 es un nivel de especificación de CSS, es la cuarta especificación ya que se ha tenido CSS, CSS2, CSS2.1 y ahora CSS3, cada especificación parte de la anterior y cada una va incorporando mejoras, nuevos estilos, y nuevas formas de aplicarlos. Las especificaciones de estas implementaciones se pueden observar en la web www.w3.org/Style/CSS:
![css3-fundamentos.jpg]()
Aquí podemos encontrar toda la documentación oficial, que va desde el uso de las diferentes instrucciones que podemos utilizar, hasta aspectos técnicos que llevaron a dicha implementación.
Aquí podemos encontrar toda la documentación oficial, que va desde el uso de las diferentes instrucciones que podemos utilizar, hasta aspectos técnicos que llevaron a dicha implementación.
¿Cuál es la finalidad de CSS?
El rol que debe cumplir CSS en nuestras web es preparar nuestras estructuras para ser presentadas, es decir, hacer que el HTML que hemos construido luzca bien para ser mostrado a un usuario. Esto puede parecer un poco tonto decirlo, sin embargo aquí es donde entran los tres factores que mencionamos al inicio, un HTML sin estilos puede ser funcional, y puede emplear elementos técnicos muy modernos, sin embargo por sí solo no será estético; esto implica que aunque nuestra web sea lo máximo, sin CSS parecerá algo incompleto.
Ventajas de utilizar CSS
- Separamos la presentación de la estructura, esto ayuda a que nuestra web sea modular.
- Las hojas de estilo CSS pueden ser compartidas por todas las páginas de una web, por lo que ganamos consistencia y ahorramos trabajo.
- Con CSS podemos hacer estilos para diferentes dispositivos y ambientes.
- El mantenimiento de un sitio que ha implementado CSS es mucho más fácil.
Navegadores modernos
En los primeros días de la web moderna, estamos hablando de los años 90 existían pocas opciones de navegadores web incluso algunos siendo de pago, pero lo que más podemos recordar seguramente era la guerra de Internet Explorer y Netscape, esto dio un impulso para que se tomara en cuenta el aspecto funcional, sin embargo al estar en guerra significaba que cada navegador tenía sus reglas y esto hacia la vida imposible para el desarrollador web. En la actualidad tenemos muchas opciones de navegadores, y en su gran mayoría son gratuitos para el usuario, los más importantes son:
- Google Chrome.
- Safari.
- Mozilla Firefox.
- Opera.
- Internet Explorer.
Cada navegador pertenece a diferentes desarrolladores, y son responsables de interpretar el HTML y el CSS por lo que cada uno debe implementar los estándares de la W3C, a pesar de esto no todos los navegadores se comportan de la misma forma con la misma instrucción CSS. Esto último se debe al motor que utilizan, veamos que motor utiliza cada uno:
WebKit
Es un motor de código abierto y es el utilizado por Chrome y Safari, a pesar que cada uno utiliza el mismo motor no necesariamente su implementación es la misma, por lo que puede haber diferencias entre navegadores.
Gecko
Es el motor desarrollado por Mozilla, y es utilizado por Firefox. Este motor también es de código abierto, por lo que podemos encontrar navegadores que lo comparten.
Presto
Es el motor utilizado por Opera y es propietario, por lo que lo veremos solo como parte de los productos de su empresa madre.
Trident
Es el motor de Internet Explorer y de momento se consigue solo en este navegador y productos de Microsoft.
Esta información es muy importante, porque no solo son los navegadores de escritorio los que utilizan estos motores, también los navegadores móviles, los clientes como los manejadores de e-mail, y hasta algunas aplicaciones. Si conocemos el motor podemos buscar de una forma más específica como poder tener un acercamiento al aspecto técnico que los regula.
Viejos navegadores
Hasta ahora hemos hablado de las opciones de navegadores más populares del mercado, sin embargo no hemos indagado en el detalle de las versiones de los mismos. Cada vez que hay un cambio en la implementación en el estándar de CSS cada navegador usualmente se actualiza para incorporar el cambio o las nuevas funcionalidades. Esto hace que las versiones viejas queden relegadas al pasado y por lo tanto su nivel de compatibilidad sea menor.
Lo que sucede es que no todos los usuarios están en la capacidad de actualizar por muchas razones, falta de permisos, incompatibilidad con aplicaciones importantes en su sistema, o hasta por motivos de seguridad de la empresa en las cuales trabajan, quienes tienen que probar los nuevos navegadores con los sistemas de la misma.
Esto hace que tengamos webs muy modernas que tal vez no funcionen en los viejos navegadores, es por ello que debemos tomar en precaución este aspecto durante la construcción de nuestros sitios.
El caso más incómodo
Un apartado muy necesario es hablar de Internet Explorer, y no para hablar solo de las cosas malas, ya que pensamos que esta gran empresa americana ha contribuido de forma espectacular al desarrollo de la computación y la informática a nivel mundial e histórico.
Pero es quizás su importancia la que ha hecho que su navegador sea uno de los casos más incómodos de manejar, solo en versiones más recientes como la actual, que es la versión 11 que se ha tenido un avance en la interpretación estándar de CSS y JavaScript, pero en versiones anteriores como por ejemplo la 8, la 7 o la muy infame 6, se tenía que hacer versiones de los sitios especialmente para que se pudieran mostrar en estos navegadores, y eso no es lo peor, si no que muchas veces había que sacrificar estética y funcionalidad solo para hacer que nuestros proyectos fuesen viables a nivel técnico.
Aquí los más jóvenes pudieran pensar por qué seguían desarrollando para esos navegadores, y la respuesta es simple, a pesar de todo Internet Explorer es uno de los navegadores más utilizados a nivel mundial debido a que viene integrado en Windows por defecto el cual es el sistema operativo más utilizado también.
Recientemente este 2015 fue anunciado que este navegador será descontinuado, sin embargo su sucesor aún no ha sido desvelado de forma completa y ya cuando sea puesto en funcionamiento de forma comercial podremos ver si continuaran los problemas antiguos o no.
CSS más que estilos
Todos estos conocimientos son necesarios, podemos saber mucho de las instrucciones CSS pero si no sabemos el trasfondo podemos sufrir, ya sea desde hacer una implementación con las mejores prácticas hasta problemas con clientes que no ven lo mismo que vemos nosotros, todo por utilizar una versión en particular de un navegador. Actualmente existen marcos de trabajo que nos ayudan a sobreponernos de todas estas adversidades, sin embargo cuando necesitamos algo muy específico, generalmente necesitamos realizar esa funcionalidad desde cero y es ahí donde necesitamos saber los fundamentos del CSS.
Finalizando este tutorial pudimos ver entonces que CSS es mucho más que un lenguaje simple y es mucho más que estilos, podemos decir que es un componente clave base para nuestras páginas web y tiene que ver con muchos aspectos, como por ejemplo todo lo que hemos visto de navegadores, los motores e incluso los problemas de compatibilidad.
