Css: errores de tipeo y sus consecuencias 12.1.15

Css: errores de tipeo y sus consecuencias

Al escribir código Css lo más normal y que a todos nos ocurre es cometer algún error de tipeo. Esto es, escribir un carácter por otro, olvidarse de ese ; entre declaraciones, comerse un } o cualquier otro despiste.

Los efectos pueden, y de hecho son, de lo más variado en función de qué tipo de error sea y, lo más importante, de la parte en que lo cometamos.

Sin olvidar el bonus por el navegador usado. En este aspecto, los errores de tipeo, también nos encontramos con sus particularidades e interpretaciones diferentes de navegador a navegador.

Así que de esto va el artículo de hoy: de los despistes en la escritura del código Css y lo que acarrean.

Errores y sus consecuencias

Varios son los errores que se pueden cometer al escribir el css. Dependiendo de en qué parte sea así será su trascendencia

Error en el selector

Si es un único selector anula toda la regla, pues no encuentra en el html a quién aplicarla.
Si son varios selectores, un selector compuesto o una lista de selectores separados por comas dependerá de dónde sea el error para que afecte a todos y se anule toda la regla, que anule a uno o varios selectores manteniendo la regla va´lida para el resto o que la aplique a un elemento del documento no deseado.

En este caso de error en el bloque de selectores no hay unanimidad entre navegadores.

Omisión del corchete

Si es en el corchete de apertura { el omitido anula esa regla y la siguiente. Esto es así porque toma todo el bloque de declaraciones y el siguiente grupo de selectores como un selector (incluido el corchete de cierre huérfano).

Si te olvidas del corchete de cierre } anula todo el css siguiente a partir de él hasta el final del documento.

Errores en la declaración Css: en la propiedad

Si el error se comete en el nombre de la propiedad invalida la declaración.

Esta es la razón por la que el uso de la doble barra // funciona como comentario de una sola línea.
Si usas // para comentar asegúrate que la línea termina con el signo de puntuación ; (punto y coma) para que el efecto del error no se propaga a las líneas siguientes.

Si se olvidan o se yerra en los dos puntos : invalida la declaración.

Errores en el valor de la declaración Css

Es la parte que más se presta a errores debido a la variedad y disparidad de los posibles, incrementada por el hecho de haber propiedades que admiten valores múltiples (como box-shadow o varias del grupo background. Así que vamos con los más habituales y significativos.

Si el error en el valor es escribir mal la palabra clave o declarar uno no recogido por la especificación se anula la declaración.

En aquellos valores que el uso de comillas "valor" es optativo, como en el nombre de las tipografías en font-family o las rutas en background-image la ausencia de una (apretura o cierre) y presencia de otra depende del navegador. COmo mucho anula la declaración y en otros casos la ignora y da por bueno el valor.

En los valores que se declaran entre paréntesis la ausencia del paréntesis de apertura (... anula la declaración.

Si el paréntesis omitido es el de cierre ...) anula la declaración y todo el resto de la hoja de estilos desde ella hasta el final.

Omisión del ;

Si olvidas el punto y coma ; de separación entre dos declaraciones ambas quedan anuladas.

La única declaración en la que el ; de cierre es optativo es la última de cada bloque de declaraciones.

Error en la sintaxis del comentario Css

Si es en el cierre anula todo hasta encontrar un cierre de comentario (*/) y si no lo encuentra adiós al resto de estilos hasta el final del documento.

Si el olvido es en la apertura del comentario (/*) y está entre reglas, anula toda la regla siguiente hasta el primer cierre de corchete } que encuentre.
Si está dentro de una regla anula la declaración siguiente en la que se encuentre (la que está junto con él entre un ; y el siguiente).

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso