soy Kseso y esto EsCSS

Nuevo look v7: EsCSS theme 2018 ~ layout maCSSonry

Cambio de piel al blog y abro artículo para que os podáis quejar a gusto.

Nuevo look v7: EsCSS theme 2018 ~ layout maCSSonry

·Por Kseso ✎ 15

Un tanto sin ganas ni ideas pero obligado por la tradición que dicta que hay que mudar la piel al menos una vez al año y que en el blog lo suelo hacer ahora en Agosto, por aquello de que es cuando más despistados estáis los usuarios, vamos con una pequeña presentación de lo que os encontraréis, de momento, solo en el índex o portada los que por ella paséis.

Y si no tenéis por costumbre visitar elhome del blog es una buena ocasión para que por una vez lo hagáis xD

En esta ocasión ya os resultará familiar para los asiduos. Todo lo que en ella puedes ver es puro CSS:

Como ves y te cuento, puro y duro reciclaje xD. Bueno, eso o demostración de que es posible usar lo más nuevo de CSS de forma radical y extrema. Que por algo suelo usar el hashtag #impoCSSible inside.

Todo ello acompañado de unas cuantas CSS custom properties para facilitarme la vida, algo de filtros y blend modes CSS y un par o tres medias queries.

Por eso y porque confío en que los usuarios del blog estaréis al día en las versiones de los navegadores que utilizáis. Y que conste en acta que he dicho "navegadores".

Regreso a las raíces

En esta versión maCSSonry layout he vuelto al código original de Blogger para mostrar en la portada la relación de los posts más recientes. Los últimos comentarios y la sección rándom sigue siendo mediante javascript.

Para solventar la cuestión del tamaño de las imágenes que devuelve data:post.thumbnailUrl, miniaturas de 72px por 72px, recurro a javaascript para cambiar su tamaño a través del atributo src: .replace('/s72-c/','/s400/');

La cuestión tipográfica

En esta ocasión también recurro a diversas tipografías de Google Fonts. La diferencia es que estoy experimentando con la forma de carga.

En primer lugar hago uso de las custom properties de Css para su declaración al elemento al que interesa:

:root { --fontF: 'PT Serif'; --sinSerif: /* Fuentes del Sistema (ver post) */; } elemento { font-family: var(--fontF), var(--sinSerif); }

Y en vez de incluir el link que facilita el servicio para la generación de la regla @font-face lo que hago es crearlo una vez los contenidos de la página ya han sido cargados.

addEventListener('DOMContentLoaded', function() { if (document.querySelector('.last-posts') != null) { var jsFonts=document.createElement('link'); jsFonts.href='https://fonts.googleapis.com/css?family=El+Messiri:400,600'; jsFonts.rel='stylesheet prefetch'; jsFonts.async='true'; document.head.append(jsFonts); } });

Es mi intención investigar un poco más a fondo esta vía y si tiene impacto en el rendimiento, carga y los efectos asociados a las webfonts (FOUT, FOIT...).

El header en los artículos

Unos días después de estos cambios en la portada acometí los correspondientes a los ítems individuales. La mayoría de cambios han sido menores y dejando la parte de los comentarios sin tocar.

Lo que sí se ha llevado una remodelación total en el header de los artículos que luce ahora el blog. Puedes ver una explicación de cómo está hecho en el post Este título se me atravesó: por levógiro, responsive, single element y pure #CSS

Por primera vez en el blog recurro a canvas para generar los polígonos del header. Una frivolidad. El código base original lo encontré en Codepen, obra del usuario Josh.

Pruebas y soporte

En sobremesa he podido probar este nuevo tema en FF, Chrome y Safari, todos en IOs. No he observado ningún problema preocupante. Sólo FF no juega del todo bien con el pie de página. Espero que en sistemas Windows no haya problemas.

En móviles mi veterano teléfono, un HTC one V, con Android 4.0.3 y FF actualizado para él, sin problemas. Tampoco en los emuladores que cada navegador facilita en su "inspector de código" se rompe nada.

Más allá no he podido ir en este apartado. Así que ya sabes. Si te topas con algún bichito grita fuerte en los comentarios. Gracias.

¡Ah!. Sí. Sigo haciendo uso de data:blog.isMobileRequest para aligerar servir o no contenido (imágenes y su tamaño, número de posts, sección "rándom"...) según el dispositivo y tipo de conexión.

Y por esta vez no hay más explicaciones, porque el cómo ya lo tengo contado en cada uno de los artículos donde publiqué como lograr los distintos efectos.

Mi intención es cambiar también el resto del blog: artículo y demás páginas. Así como el backend: abandonar javascript para obtener los ítems de la portada en favor de código nativo de Blogger. Pero ya con más calma.

Espero que sea de vuestro agrado. Incluida la paleta de colores usada. Y que no os topéis con bichos muy gordos.

Nota del Editor: Por cierto, este el el artículo Nº 600. ¡Chupito! 🥃

avatar del Editor del blog

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 Don Kseso Kseso