Bitácora CSS by Yeray Guachetá Carreño

RESPONSIVE DESIGN EN CSS, MEDIA QUERY

yeye20041 — 2022-10-11 14:42:42 UTC

Media Query (Consults en medios)

Las utilizamos cuando deseamos modificar una página web o aplicación en función del tipo de dispositivo con características o parámetros específicos (resolución de pantalla, formato del dispositivo, etc.).
Esta técnica del CSS3 usa el elemento @media para incluir un bloque de CSS cuyas propiedades son aplicadas si la condicion es verdadera.

Sintaxis
Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.

El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.

Media types

Los Media Types (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y será interpretada como all.

- all: Apto para todos los dispositivos.
- print: Destinado a material impreso y visualización en el modo de vista previa de impresión.
- screen: Destinado principalmente a las pantallas.
- speech: Destinado a sintetizadores de voz.

Operadores Lógicos

Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only; además se puede combinar múltiples queries en una lista separada por comas múltiples.
- and: El operador and es usado para colocar juntas múltiples funciones multimedia. Ejemplo:
@media (min-width: 700px) and (orientation: landscape)

- not: El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:
@media not all and (monochrome) { ... }
Esto significa que el query es evaluado de la siguiente forma:
@media not (all and (monochrome)) { ... }

- only: El operador only previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:

Funciones multimedia
La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.

- color
Valor:
Medio: media/visual (en-US)
Acepta prefijos min/max: si

- color-index
Valor:
Medio: media/visual (en-US)
Acepta prefijos min/max: sí

- aspect-ratio
Valor: (en-US)
Medio: media/visual (en-US), media/tactile (en-US)
Acepta prefijos min/max: sí

- device-aspect-ratio
Valor: (en-US)
Medio: media/visual (en-US), media/tactile (en-US)
Acepta prefijos min/max: sí

- device-height
Valor:
Medio: media/visual (en-US), media/tactile (en-US)
Acepta prefijos min/max: sí

- device-width
Valor:
Medio: media/visual (en-US), media/tactile (en-US)
Acepta prefijos min/max: sí

- grid
Valor:
Medio: all
Acepta prefijos min/max: no

- height
Valor:
Medio: media/visual (en-US), media/tactile (en-US)
Acepta prefijos min/max: sí

- monochrome
Valor:
Medio: media/visual (en-US)
Acepta prefijos min/max: sí

- orientation
Valor: landscape | portrait
Medio: media/visual (en-US)
Acepta prefijos min/max: no

- resolution
Valor:
Medio: bitmap (en-US)
Acepta prefijos min/max: sí

- scan
Valor: progressive | interlace
Medio: media/tv (en-US)
Acepta prefijos min/max: no

- width
Valor:
Medio: media/visual (en-US), media/tactile (en-US)
Acepta prefijos min/max: sí

Fuentes:

https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

SELECTORES, PROPIEDADES Y VALORES

yeye20041 — 2022-10-11 14:43:50 UTC

¿Qué es un selector en CSS?
Un selector CSS es la primera parte de una regla CSS. Los selectores son las propiedades que utilizamos para modificar los estilos de los elementos en el HTML, existen muchos tipos de selectores en CSS, los que nos ofrece una gran variedad de posibilidades para aplicar estilos a nuestra página web. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.

Selector
Un nombre que representa el/los elementos HTML que queremos estilizar. Es la referencia o el “gancho” que conecta un estilo con un determinado elemento. Hay distintos tipos, como veremos más adelante.

Propiedad
Las características que podemos modificar del elemento (por ejemplo, además del color, podemos modificar el ancho del elemento con width, su alto con height, su tamaño de letra con font-size, etc.).

Valor de propiedad
Aquí estableceremos uno de los posibles valores que la propiedad puede tomar (por ejemplo, color puede ser red, black, un valor hexadecimal como #1234ab, etc.).

Declaración
Una rule formada por propiedad y su valor.

Lista de selectores más comunes usados en CSS

Fuentes:

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors#%C2%BFqu%C3%A9_es_un_selector
https://tech.tribalyte.eu/blog-entendiendo-css-parte-1

PSEUDOCLASES Y PSEUDOELEMENTOS

yeye20041 — 2022-10-11 14:44:35 UTC

Pseudoclase
Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.
Las pseudoclases son palabras clave que comienzan con dos puntos:
:pseudoclase-class-name

Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML.

Pseudoelemento
Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos ::.
:pseudoelemento-class-name

Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.

El pseudoelemento ::first-line soluciona este problema: no importa si el número de palabras aumenta o disminuye, siempre se selecciona la primera línea.

Fuente: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%C2%BFqu%C3%A9_es_un_pseudoelemento

CASCADA Y ESPECIFIDAD

yeye20041 — 2022-10-11 14:48:02 UTC

En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La cascada, y el concepto estrechamente relacionado de especificidad son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos.

Cascada
En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

Especifidad
Es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector, es un método de resolución de conflictos dentro de la cascada.:

Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad.
Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo class dado), y por tanto recibe una puntuación mayor.

Fuente: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#el_efecto_de_la_ubicaci%C3%B3n_del_css

DISPLAY MAS USADOS: BLOCK, INLINE E INLINE-BLOCK

yeye20041 — 2022-10-11 14:48:39 UTC

inline: Muestra en la misma línea (respetando el flujo) todos los elementos y no acepta las propiedades width, height ni margenes verticales.
block: Muestra los elementos en líneas independientes y acepta las propiedades width, height y margenes verticales.
inline-block: Su comportamiento es una mezcla entre los dos anteriores, se muestran en la misma línea (respetando el flujo) todos los elementos y además, acepta las propiedades width, height y margenes verticales.

Fuente:
https://es.stackoverflow.com/questions/24964/cu%C3%A1l-es-la-diferencia-entre-display-block-display-inline-y-display-inline-b

FLEXBOX Y CSS GRID

yeye20041 — 2022-10-11 14:48:52 UTC

Flexbox
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

Grid
CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo.

Fuentes:

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#:~:text=contenido%20ser%C3%A1%20Grid.-,Grid%20y%20flexbox,y%20columnas%20al%20mismo%20tiempo.
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

ATOMIC DESIN

yeye20041 — 2022-10-11 14:48:59 UTC

Es una metodología de diseño web que toma nota de OOCSS e inspirada en la química, en la cual Frost replantea la estructuración por componentes reusables con clases semánticas a la cual la mayoría de los diseñadores estamos acostumbrados (e.j. .widget o .media que podamos definir en nuestros temas) y sugiere que partamos desde la unidad más pequeña e indivisible, o atómica, en nuestro diseño: inputs, labels, botones, otros HTML tags que vayamos a usar, incluso elementos más abstractos como paletas de colores, fonts y hasta animaciones.

Video explicativo

Fuente: https://rootstack.com/es/blog/una-forma-diferente-de-estructurar-tu-css-atomic-design

yeye20041 — 2022-10-11 16:19:28 UTC

yeye20041 — 2022-10-11 16:23:05 UTC

yeye20041 — 2022-10-11 16:23:40 UTC

yeye20041 — 2022-10-11 16:28:21 UTC