En diseño, un sticky footer es un pie de página que se queda "pegado", independientemente de la cantidad de contenido, a la parte inferior de la ventana del navegador. Con esto evitamos que nuestro diseño se rompa al aparecer el pie de página en mitad del documento, cuando el propio documento tiene poco contenido. No debemos confundirlo con un pie de página que se queda fijo y es visible a lo largo de todo el documento, eso es arena de otro costal.
Hay varias formas de hacerlo, y cada una de ellas con sus pros y sus contras. De momento voy a pasar por alto el uso de Grid Layout, por la escasa compatibilidad que aún existe en los diferentes navegadores, aunque es probablemente una de las mejores y más limpias formas de conseguirlo. Así que no perdamos el tiempo y ¡al lío!.
Este Septiembre ha sido mucho más duro de lo esperado. Nuevo trabajo, nuevos estudios, las niñas empiezan al cole ..., y al final me he ido quedando sin tiempo para escribir. Así que una vez dejado atrás Septiembre y tantos cambios, mejor retomamos las buenas costumbres con un post sobre un par de interesantes elementos interactivos de HTML5, que ya hacía algún tiempo me rondaba por la cabeza.
Los elementos details y summary son de esos elementos de HTML5 poco extendidos y por tanto poco conocidos. La excesiva avalancha de posts sobre los elementos semánticos (de la cual yo también soy responsable), ha dejado de lado ciertos elementos que aportan funciones muy interesantes, y que si bien todo esto se puede hacer con Javascript, ¿a quién no le apetece ahorrarse unas cuantas líneas de código?.
El box model, o modelo de cajas, es uno de los pilares básicos para comprender el funcionamiento de CSS. Suele traer de cabeza a los que se inician con las hojas de estilo en cascada, y en ocasiones también a los no tan iniciados. Su entendimiento es la base para conseguir un layout sólido, sin miedo alguno a que en algún punto este se rompa.
Con el tiempo el box model se ha ido quedando un poco desactualizado, y lo que antes era sólo una cuestión de entendimiento y unos pocos cálculos, con los layouts actuales se ha ido convirtiendo en una auténtica pesadilla. De ahí, que en CSS3 se incluyera la propiedad box-sizing, que nos permite cambiar la forma en que se calculan las dimensiones de las cajas y nos hace la vida mucho más sencilla.
De vez en cuando me doy de bruces con un caso que aunque a priori parece muy sencillo, termina complicándose hasta el punto de no saber por donde atajarlo. Para este caso concreto, por más que he buscado, rebuscado y leído, no he encontrado una solución a la que dar crédito, salvo la que vamos a ver en el artículo de hoy.
Bien parece un caso simple, y de hecho lo es, si se trabaja con las herramientas adecuadas y no confundes el funcionamiento de algunas de la propiedades o valores que vamos a usar. Sin embargo es un caso específico, en que jugamos con márgenes automáticos, por tanto desconocemos completamente las medidas. Así que mejor vamos al lío.
Es muy sencillo ocultar un elemento con CSS, sólo debemos escoger la propiedad adecuada y aplicarla. ¿Pero realmente sabemos que es lo que está ocurriendo?, porque no es lo mismo hacer opacity: 0 que display: none, de hecho difieren bastante. Según que técnica usemos tendrá unos u otros efectos, pero no sólo sobre él mismo, sino que también puede afectar al resto de elementos posteriores a él.
En este artículo vamos a ver 7 formas de ocultar un elemento con CSS y también veremos que es lo que realmente hace la propiedad que usemos para tal efecto. ¿Se compromete o no la accesibilidad?, ¿qué pasa con la navegación por teclado?, y porqué no, ¿hay algún efecto negativo en cuanto a SEO?. Todas estas preguntas deberemos hacérnoslas para elegir la forma idónea para ocultar un elemento.
El centrado en CSS es uno de los temas más recurrentes, y es que ¿quién no ha tenido algún percance con un elemento que quería centrar?, ¿quién no se ha dado de cabezazos contra la mesa?, o ¿quién no ha llegado a lanzar el teclado por la ventana?.
Si en alguna ocasión te ha ocurrido algo de esto, no desesperes, tan sólo preocúpate de recoger el teclado (lo vas a necesitar), del resto nos vamos a ocupar hoy en este artículo. Porque el centrado en CSS no es tan fácil, pero tampoco tan difícil.
