HTML y CSS: El "extraño" comportamiento de las cajas anidadas

Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página.

Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias.

Un caso “extraño” se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros.

Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo <div>, uno dentro de otro:

<div id="Uno">
    <div id="Dos">
        Lorem ipsum...
    </div>
</div>

Y les aplicamos los siguientes estilos:

html, body{
    width: 100%;
    height: 100%;
    margin:0px;
    padding:0px;
}

#Uno{
    background-color: aqua;
}

#Dos{
    background-color: blue;
    padding: 20px;
    margin: 30px;
    height: 200px;
    width: 200px;
}

Fíjate en que el div exterior (‘Uno’) no incluye ningún tipo de dimensión ni otras propiedades. Es un elemento de bloque (display:block) porque es su comportamiento por defecto, pero nada más.

Este fragmento tan sencillo se visualiza de la siguiente manera:

CSS-Anidados-01

Es decir, si nos fijamos, la caja exterior ocupa todo el ancho disponible en la página extendiéndose hacia la derecha, se respeta el margen horizontal de 30px de la caja interior (por eso está desplazada hacia dentro, a la derecha) pero aparentemente no se respeta el margen vertical que se ha indicado (también de 30px). Además la caja exterior no está pegada al borde superior de la página a pesar de tener un margen y un relleno de 0 (son sus valores por defecto).

Es decir, en este caso se dan dos comportamientos extraños, en apariencia independientes, que son los que he marcado en negrita en el párrafo anterior que vamos a analizar a continuación.

SIGUE LEYENDO para aprender:

  • Cómo funciona el derrumbe de márgenes en elementos adyacentes
  • De qué manera diferente funciona cuando los elementos están anidados
  • Cómo podemos prevenir el derrumbe de márgenes
  • Cómo afecta la propiedad overflow sobre la visualización de márgenes
  • Qué es un contexto de formato de bloque
  • Cómo afectan otras propiedades sobre la visualización de márgenes

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Front-endSupongamos que tienes un elemento en tu página como este:

<div class="rojo">

que quieres localizar y cambiar la clase que tiene aplicada para que pase a ser “verde”, o sea, equivalente a esto:

<div class="verde">

Nota: Dejemos de lado el hecho de que el nombre de la clase no es el más apropiado pues no es reutilizable y está atado al aspecto físico concreto. Este no es un artículo de buenas prácticas de CSS.

Para realizar ese cambio de clase, la gente que utiliza jQuery está muy acostumbrada a escribir código como este:

$('.rojo').removeClass("rojo").addClass("verde");

Este fragmento es muy sencillo y lo que hace es, primero localizar todos los elementos que tienen aplicada la clase “rojo”, a éstos se la retira con removeClass y luego le añade la clase “verde” usando el método addClass de jQuery.

La verdad es que es muy fácil, pero ¿realmente merece la pena añadir una dependencia a jQuery (y todo su peso y procesamiento) a nuestra página para hacer algo tan sencillo?

La respuesta es que, desde luego solo para este tipo de cosas, no: no merece la pena.

Los navegadores actuales son capaces de hacer exactamente lo mismo con JavaScript puro sin necesidad de recurrir a bibliotecas externas, y además es casi igual de sencillo conseguirlo.

Vamos a ver cómo podemos lograr lo mismo sin jQuery, solo con lo que nos ofrece el navegador…

SIGUE LEYENDO para aprender:

  • Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
  • Cómo quitar clases
  • Cómo añadir clases
  • Cómo alternar clases
  • Cómo comprobar si un elemento tiene aplicada o no una determinada clase
  • Cómo dar soporte a navegadores muy antiguos