Can I use... Support tables for HTML5, CSS3, etc

Merci !

Media queries are the backbone of responsive design. We use them to control how a design should change based on the viewport size. But the min-width and max-width syntax can be confusing, and in some cases, cause layout bugs that take time to spot.

This article aims to convince you to use range queries, starting today.

Ah ça y est, c’est enfin utilisable ? Quelle bonne nouvelle, ça va enfin devenir lisible tout ça, quel progrès.

▻https://caniuse.com/?search=Media+query+range+syntax

Attention quand même : ▻https://caniuse.com/mdn-css_types_color_hsl_relative_syntax

93% en France et 89,5% dans le monde, c’est pas 98% ni même 95% comme seuil acceptable de « presque tout le monde ok ».

Joli. Bizarrement, caniuse lui colle 0,02% de compatibilité, indiquant que ce sera pour une future version de Chrome, alors que chez moi ça fonctionne parfaitement (Chrome Mac).

Ça change bien la hauteur du p, mais ça n’applique par transition: 1s; ;)

Si, justement, avec Chrome sur Mac, on a bien la transition hyper-smooth. (Safari, en revanche, c’est sans transition.)

Encore un truc casse-gueule : je développe sur Mac des écrans tactiles qui tournent sur des PC. Comme je connais la machine cible, je peux utiliser les dernières CSS qui sortent, mais quand ça fonctionne différemment sur Mac et sur PC, c’est hyper-chiatique.

▻https://caniuse.com/?search=interpolate-size

Donc c’est bien ça, ça devrait fonctionner sur les Chrome à jour depuis une semaine. @b_b : je viens du coup de rallumer le PC et de mettre à jour Windows, et j’ai bien la transition smooth comme tout…

Du coup : faudrait l’intégrer à @seenthis pour les messages longs. Comme de toute façon on n’a pas d’animation là-dessus, ajouter ce petit bout de CSS n’introduira aucune perte.

Ça ne mangerait pas de pain oui, à ce sujet il faut que je poste un message pour annoncer les changements du côté du développement de #seenthis :)

Le lien vers les changements de @seenthis : ▻https://seenthis.net/messages/1073344

Je viens de mettre le bout de code dans /squelettes.

@arno vu mais c’est sur la branche master ▻https://git.spip.net/seenthis/squelettes/-/commit/d85bc0f14de2c6b01bc61a104a1162e94d3c3302 qui est celle compatible avec SPIP 4, celle utilisée en pro est la branche 2.2. Soit on reporte dans cette branche, sinon on peut attendre le passage en SPIP 4 de seenthis.

Ce qui permet de découvrir que les Nesting CSS sont désormais acceptés par 85% des usagers :
▻https://caniuse.com/?search=nesting%20css

#intégration #web #css #boutons

On avait déjà référencé une notation équivalente (mais celle ci-dessus est sans doute plus facile à comprendre) :

margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);

Dans mon plugin Maquettes multiples, j’utilise différentes valeurs pour .spip_documents.max selon qu’on est dans une colonne centrée ou décentrée. Ça peut devenir assez sioux.

Un truc sympa pour l’accessibilité : tu peux désactiver le « smooth scrolling » directement dans les CSS pour les gens qui désactivent les animations dans leurs options de smartphone (en tout cas sur iOS) :

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

2 bémols :

Can I use indique un peu plus de 80% : ▻https://caniuse.com/?search=scroll-behavior
Mais le défilement se fait dans tous les cas, donc pas grave.

Ça évite d’ajouter du js mais, dans le cas de liens de retour en haut de page par exemple, on n’a pas forcément envie que l’url soit changée (avec une ancre #haut et même juste #) et je ne sais pas s’il y a une autre solution que du js. Mais là encore, c’est pas bien grave :)

C’est plutôt à mettre sur le body non ? (qui est scrollable)

Mais dans tous les cas ça remplace pas du tout la variable de SPIP, dès lors qu’on utilise soi-même la méthode positionner() (pour forcer le déplacer à tel endroit) ça n’est pas pris en compte à priori.

Le brouillon de modification de la spécification de la balise img au whatwg : ▻https://github.com/whatwg/html/pull/3752

#lazy_loading #loading #image #web_dev

Mise à jour octobre 2019 : présent chez 61% des visiteurs :
▻https://caniuse.com/#search=lazy

C’est-à-dire les différentes versions de Chrome. Apparemment pas prévu de l’intégrer sur les autres navigateurs (donc pas iOS, où l’on n’a pas le choix du moteur de rendu HTML).

Un fallback CSS à coucher dehors:
▻http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

body {
 color: red;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}

Je viens d’uploader une mise à jour de mon #plugin #SPIP CSS imbriqués :
►https://zone.spip.org/trac/spip-zone/browser/_plugins_/css_imbriques

On peut désormais utiliser un pseudo-style -spip-text-background par exemple ainsi :

div {
	color: orange;
	-spip-text-background: url(../imgs/test.jpg) 100% 100%;
}

https://i.imgur.com/Mmyyj6s.jpg

merci. Par contre un souci sur le blog : certains navigateurs me disent qu’il y a ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY

et donc on ne peut se connecter.

enfin, voir l’article.

Du coup, j’en reviens à me dire que j’ai bien tort de ne pas considérer mon blog comme le pivot central de ma vie numérique. J’écris moins ici parce que j’écris trop ailleurs, alimentant des bases de données dont la priorité n’est pas le partage et la conservation de l’information. J’utilise les réseaux sociaux pour le débat, pour affiner une pensée que j’exige à présent achevée avant de rédiger ici…

Ce qui est une grossière erreur : la pensée n’est jamais achevée, tout au moins jusqu’au jour où un interne vaguement post pubère m’attachera une étiquette au gros orteil.

@maieul on vient de passer le serveur à http/2. Si tu peux préciser l’heure de ta tentative de connexion et le navigateur (version et OS), ça pourrait aider.

connexion à 21h19. Firefox Mac 48 (je peux pas plus récent).

Même pb que @maieul mais avec un Mac nettement plus ancien.

Bizarre car c’est dans Firefox depuis la 36 si j’en crois ►https://caniuse.com/#search=http2

Et maintenant ça marche ? On a ajouté:ssl_ciphers "EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5";

pour moi, oui #merci !

pour moi aussi ! Merci !

Je n’ai pas très bien compris ce que le RSA venait faire là-dedans, mais côté public, tout le monde a l’air content à présent, sauf un vilou :

problème avec Opera sur Android 7.0, en connexion 4G, pour ma part.

Côté admin, c’est toujours le merdier.
Je viens de simplifier en masse mes URL : manière, niveau référencement, ça ne peut pas être pire.
Côté admin, c’est toujours le merdier et je ne sais toujours pas pourquoi…

Quels serveurs ou clients implémentent cette nouvelle version de HTTP ?

Spdy :
▻http://caniuse.com/#search=spdy
HTTP2 :
►http://caniuse.com/#search=http2

Voir aussi ▻http://seenthis.net/messages/343578

Pour info, à partir de Chrome 51 qui vient de sortir, SPDY et NPN ne sont plus supportés

+1 pour mdn sans oublier ►http://caniuse.com