Categorías
CSS

Frameworks CSS sin clases

Leyendo el breve artículo No-Class CSS Frameworks, me ha recordado algo que encontré (y alabé) hace algunos años: El CSS Grid mínimo: ungrid.

La lista de frameworks CSS —una denominación tal vez demasiado pretenciosa, para tratarse sólo de una hoja de estilos—, es la siguiente:

Y creo que merece algo más que darle un vistazo. Keep It Simple, ya sabemos.

Categorías
CSS Desarrollo web

Evolución del diseño web, desde los 90 hasta el presente

Reseño el artículo en marzo del año 2020. Yo empecé en el 2001 como desarrollador web. Ha pasado mucho tiempo, la web a evolucionado mucho, y se nota.

En Old CSS, new CSS, Evelyn Woods muestra algunos hitos reseñables desde que comenzó en la profesión, hasta la actualidad. Se centra en CSS, que honestamente creo que dentro de los estándares, es lo que más ha cambiado (detrás andaría ECMAScript, en mi opinión).

La perspectiva que te ofrece el haber vivido en primera persona todos los cambios que se han sucedido en el diseño web, y explicarlo de la manera en que lo hace, provoca que el artículo sea una lectura más que recomendable, para los que llevan un tiempo similar a la autora, y también para los que llevan menos tiempo.

Es nuestra historia. Con sus cosas buenas y sus cosas malas.

Recuerda: Old CSS, new CSS.

Categorías
CSS

Metodología BEM: Block, Element, Modifier de CSS

La metodología BEM fue desarrollada por el equipo que trabaja en yandex (una empresa de tecnología de origen ruso).

El objetivo principal de la metodología es mejorar la organización de CSS utilizando una nomenclatura para los nombres de clases compuesto por:
* El nombre del bloque HTML
* El elemento dentro de ese bloque
* Un modificador, que define la apariencia, estado o comportamiento.

Veamos un ejemplo (adaptado de la documentación oficial):

<!-- bloque `search-form` -->
<form class="search-form">
    <!-- elemento `input` element del bloque `search-form` -->
    <input class="search-form__input">

    <!-- elemento `button` del bloque `search-form` -->
    <button class="search-form__button">Buscar</button>
</form>

Ventajas:

  • Ofrece un sistema para organizar y nombrar clases.
  • Permite trabajar de forma coordinada y asíncrona a los miembros de un equipo.
  • Permite conocer de un vistazo la estructura, tanto del documento HTML, como de las clases CSS.
  • Permite evolucionar y modificar elementos con facilidad (creando clases de modificadores)

Inconvenientes:

  • Hay que ajustarse a las normas y reglas de la metodología.
  • La cantidad de clases utilizadas puede ser más elevada que otras alternativas.
  • La teoría de que cambiando una clase se cambia el aspecto de una web, no aplica aquí: para ser coherente hay que crear clases que modifique el aspecto de los elementos, y añadirlos al código HTML.
Categorías
CSS

Aprender de una vez posicionamiento CSS

Ahora hay más alternativas en CSS, pero una de las cosas que más me ha costado aprender es el posicionamiento CSS.

Bueno, pues hay un simpático tutorial para refrescar, o aprender de una vez: Learn CSS Positioning.

Categorías
accesibilidad CSS

Detectando imágenes sin alt mediante CSS

En una micropublicación de Addy Osmani, muestra un pequeño truco para visualizar de forma clara cuando una imagen no tiene alternativa textual (atributo alt):

img:not([alt]){
    border: 5px solid red;
}

De esta manera, veremos un llamativo y grueso borde de 5 pixels rojo en las imágenes que probablemente estén incumpliendo una regla básica de accesibilidad web (tal vez sean decorativas, pero no es lo habitual).

Una alternativa —también propuesta por el mismo autor—, aprovecha una interesante y potente característica de CSS3: la aplicación de filtros en imágenes.

img:not([alt]){
    filter:blur(5px);
}

Y como consecuencia, veremos las imágenes sin alternativa textual desenfocadas.

Más allá del aspecto cómico que pueda tener el mostrar una imagen desenfocada, y dar a entender que no se ha cargado correctamente, creo que en situaciones en los que sea factible incluir imágenes sin textos alternativos —ya sea por los editores encargados de generar contenidos, o el propio software de creación de contenidos—, creo que no viene mal incluirlo en las hojas de estilos utilizadas, aunque sea en entornos previos (desarrollo, pre-producción, QA).

Porque, pasa el tiempo, y todavía tenemos que seguir insistiendo en las ventajas de la accesibilidad web, y la satisfacción del trabajo bien hecho: por los editores y desarrolladores. Pero sobre todo por los usuarios. Por todos.


Por cierto: blog posible comenzó su historia en el lejano año 2005. Estuvo funcionando hasta el 2008, en el que por diversos motivos, decidí aparcar este blog (junto con web es móvil) y empezar de nuevo, con Xposible.

Más tarde, empecé a utilizar tumblr (¿cómo se pronuncia?) haciendo blogs temáticos, en los que básicamente, incluía enlaces (lo contaba en asuntos varios y ahí puedes encontrar los enlaces).

Hoy, casi doce años después de la última publicación, vuelvo a escribir de nuevo aquí.

Probablemente este blog se nutra de esos enlaces y recursos pero utilizando y revitalizando webposible.  Mientras muchos blogs de aquella época, continúan en estado zombie o directamente han desaparecido, yo vuelvo tras un descanso de casi doce años. Cuento contigo.