Introduccion
1991
- Tim Berners Lee creó WWW y HTML (el tenía un hoja de estilos NO CSS, pero no quería compartirlo ya que pensaba que un feature así tenia que ser NATIVO).
1993
- Viola(navegador), tenía su propio lenguaje de estilos y queria convertirlo en un lenguaje estandara para la web.
1994
- NSCA Mosaic(navegador), tenía a Marc Andreessen como co-creador, les dijo a los desarrolladores que no había forma de trabajar con algo así(CSS). håkon wium lie sacó una propuesta para algo así CHSS.
- Se dió a la luz presentando dicha propuesta inicial. debatiendo si cualquier usuario pudiera manipular los estilos.
1995
- håkon y Bert Bos: se unen y responder al 1er borrador en la conf de WWW en 1995.(algó que término siendo muy importante fue que sacarón la “H” y término siendo CSS)
- Se siguió debatiendo el control del usuario sobre los estílos, esta idea término siendo rechazada.
- W3C: saca una junta, ya que era de su interés.
1996
- EL NACIMIENTO DE CSS: Terminó naciendo por recomendación de W3C.
- Primeros navegadores Compatibles:
- Internet Explorer 3
- NETSCAPE
- OPERA
1998
- Nace CSS2, con correcciones con las limitaciones y el problema de los elementos FLOTANTES.
Limitaciones de CSS y el problema de los elementos flotantes
- Columnas falsas: es una técnica que hace una ilusión cuando una columna es más pequeña que otra se la rellena de un background de tipo imagen.
- Los primeros diseños de CSS eran una mezcla entre elementos flotantes y posicionados.
- Haciendo que se tengan limitaciones de control
- Provocando que la información no se vea uniforme
- Existía una frustración por la falta de columnas de altura completa.
- Para solucionarlo se creó una técnica de columnas falsas
- Se empieza hablar de Diseño Responsivo.
- Ethan Marcotte ⇒ Tecnica de diseño responsivo
- Se empieza a trabajar con elementos flotantes.
- El problema está que solo funciona cuando se calcula con precisión el ancho y si el contenido tiene la misma altura
- La solución fue que se comenzó a trabajar con columnas a través de contenedores para cada una y no con elementos independientes
- Tambien se comienza a usar display: table que también se pueden utilizar para elementos que no son elementos de tablas
- Existen una gran cantidad de técnicas que son simplemente trucos.
- Por ello CSS se ha visto difícil y frágil porque no había herramientas de diseño
En el principio usar CSS implicaba usar trucos, comenzando desde las columnas, columnas de tamaño completo, el diseño responsivo, etc. Era de esta manera debido a que no se tenían muchas herramientas.
Herramientas que nos han facilitado el camino
Algunas de las herramientas principales son:
Arquitecturas
Cuando hacemos css tenemos una metodología de trabajo, que nos facilita el programar.
Pre y post procesadores
Agregar prefijos y propiedades de acuerdo en que navegador estemos trabajando. Aunque siempre hay que verificar sus pros y contras.
Diseño de componentes
Trabajar con componentes, a partir del elemento mas pequeño.
Frameworks
Modelos de trabajo que nos facilita crear diseños web.
Performance
Verificar el rendimiento de nuestro código.
Accesibilidad
Lograr que todas las personas puedan acceder a nuestros sitios web.
Evergreen browsers
Son navegadores que se actualizan constantemente a futuras versiones que existen.
¿Cómo se llegó al concepto de CSS Grid?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: Margin
Cuando se establece el margin: 0 auto; lo que hace el navegador es establecer el tamaño de los márgenes izquierdo y derecho por igual(es decir, lo centra horizontalmente), además de que el superior e inferior tendrán 0 de margen.
Propiedades que necesitamos:
- margin-top
- margin-right
- margin-bottom
- margin-left
La desventaja de usar este tipo de alienación es que necesitamos ser exactos con las medidas (px), por lo que si queremos trabajar con responsive o medidas relativas se hara muy complicado.
Margin Collapse
Técnicas de alineamiento antes de CSS Grid: Line-height
Propiedades que necesitamos:
Text Align
- Nos permite alinear textos de manera horizontal
Vertical Align
- Nos permite alinear textos de manera vertical
Line Height
- Nos permite controlar la altura de los textos
Técnicas de alineamiento antes de CSS Grid: Table Cell