¿Cuál es el elemento raíz o primero de todos? 17.12.12
¿Cuál es el elemento raíz de un documento web? Si dices que el html, lo siento, has fallado.
¿Cuál es el elemento raíz o primero de todos?
Si tu primera reacción ha sido pensar que vaya una pregunta más obvia que hago y has dicho que es el html siento decirte que 1 punto menos para ti.
Pero no te preocupes en absoluto, es una creencia muy extendida. Demasiado, quizás.
El elemento raíz o primero de todos, "padre" del html y abuelo de body no es otro que el que los ingleses llaman viewport o espacio de visualización.
Al que el consorcio define en la especificación Css2 como:
Los agentes de usuario para los medios continuos generalmente ofrecen a los usuarios un acceso visual (una ventana o área de visualización en la pantalla o la hoja de papel) a través del cual los usuarios consultan un documento. Los agentes de usuario pueden cambiar el diseño del documento cuando la ventana cambia de tamaño.
Y para confirmarlo sólo necesitas hacerte dos preguntas:
- .- ¿Tiene algún efecto declarar en el html valores para su tamaño, márgenes...?
- .- ¿Con referencia a qué se posicionan los elementos con position: fixed?
- .- Y ¿qué ocurre si el html y el body se declaran como position: static? ¿Cuál es el elemento referente para el contenido de la página posicionado?
Tres sencillas preguntas que están resueltas en la demo de abajo. Mira a pantalla completa el ejemplo y juega a redimensionar la ventana. Y si quieres ver los códigos, pulsa el + a la derecha de "result".
Más info
- Intrigado por cómo muestro el código Css del ejemplo: Mira cómo
- En la recomendación User Agent Accessibility Guidelines
- La regla @viewport en css.
- Uso del meta tag viewport para controlar el layout en navegadores móviles por Mozilla Developer Network
- Controlando el viewport por Safari Developer
- An introduction to meta viewport and @viewport Por dev.opera
- A tale of two viewports
Curiosidad y pregunta para que comentes:
Como curiosidad, ¿viste qué propiedad Css es heredada hacia arriba? Esto es, que un valor declarado en el hijo (elemento html) afecta al padre (elemento viewport)?
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
La verdad es que no estoy demasiado de acuerdo en que sea un "elemento". Sí creo que el viewport es algún tipo de entidad, pero ciertamente no un elemento. Incluso hay uno de tus artículos, el que hace una diferenciación entre elemento y tag, que tampoco permite clasificar al viewport como "elemento". Y si lo pensamos en función a la api DOM javascript, el elemento html está representado por document.documentElement, cuyo parentNode es #document, es decir, no existe viewPort.
ResponderEliminarGracias CG por compartir tu opinión.
ResponderEliminarSi prefieres en vez del término "elemento" podríamos llamarlo "caja de contención", "espacio de presentación"... (o de cualquier otra forma) que actúa como referente y contenedor para la representación del documento.
Sólo que este "elemento" no aparece explicitado ni necesita ser declarado.
Si no existe (la pantalla, el papel, el reproductor de audio...) el documento no se representa.
Creí que con el ejemplo quedaba claro que hay algo fuera del elemento html que es el referente primero.
Un saludo