#css

Excellent.
CanIUse me dit 94% en France, c’est pas mal…

Ça peut aussi servir à faire des blocs dont on est sûr qu’il font la hauteur de l’écran aussi (alors qu’on peut le faire avec height:100% uniquement si c’est à la racine ou si chaque parent à height indiqué…).

#intégration #web #CSS #responsive #typographie #viewport

Attention, 100vh ne représente pas toujours la hauteur totale visible : ▻http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-s

Arf, c’est ballot, merci de l’info. Après c’est plus ou moins critique (là dans ton cas pour faire du faux fullscreen, pour un truc qui DOIT être pile de la taille, ça l’est). Si c’est pour que avoir un grand bloc de la hauteur d’écran au-dessus de la ligne de flottaison, mais avec d’autres choses en scroll dessous, c’est moins grave.

Exactement

https://dl.dropbox.com/s/ogbv1x2f7tddyxh/balloons-css.png?dl=0

(excuse-moi j’ai une mémoire visuelle)

#intégration #web #HTML #tooltip #infobulle

Ne t’excuse pas hein, rajoute autant que tu veux c’est fait pour ça :)

#intégration #web #HTML #responsive #tableau

Ça pourrait être en standard dans les css de #SPIP non ? Je ne vois pas de contre-indication…

Sur table.spip ? Possible oui (après on n’a pas de moyen de dire qu’on veut la version flip). Je pensais déjà au moins me l’ajouter à mon échafaudage Intégraal.

Je pense qu’il n’y a pas de contre-indication, on utilise déjà un truc similaire (mais moins bien, je vais changer) sur par ex ►https://research.science.ai/article/on-the-marginal-cost-of-scholarly-communication et dans l’ensemble ça a l’air de rouler. On n’a aucun contrôle sur les tables donc c’est nécessaire.

Je songeais à ajouter un bouton « Flip » (enfin ça en mieux grâce à notre designer) pour que les gens puissent réorienter eux-mêmes.

@fil @rastapopoulos on peut aussi proposer @tetue de l’intégrer dans #tinytypo ?

Il y a plusieurs approches possibles pour rendre un tableau consultable en petites largeurs : la linéarisation (que j’ai préférée sur le site tinytypo.tetue.net et qui doit de toute façon rester possible pour une bonne accessibilité) ou celle ci-dessus, par exemple.

Et plusieurs peuvent cohabiter, au sein d’un même site, en fonction du type de données tabulaires.

Aucune ne m’a semblé suffisamment générique pour constituer une bonne approche par défaut, pouvant être incorporée à la base minimale qu’est Tiny Typo (ou à SPIP).

Celle-ci est toutefois intéressante en ce qu’elle ne nécessite pas de div englobante, mais seulement l’apposition d’un sélecteur CSS sur l’élément table. À tester dans la vraie vie des sites.

Cela peut être porté dans SPIP, sous la forme d’un plugin dédié, de façon à l’expérimenter d’abord, dans la vraie vie des sites. Puis l’incorporer ultérieurement si ça s’avère être une vraie bonne idée.

#intégration #web #CSS #em #rem #taille #typographie

COOL.

Mais ça ne gère pas les sous-menus par contre. Ça sera pas mal d’arriver à coupler ça à un autre plugin (ou CSS) qui gérerait les sous-menus de manière accessibles (avec nav par clavier aussi) et responsive.

#intégration #web #HTML #CSS #javascript cc @fil

Ah bah ya même un ticket d’amélioration pour ça déjà :
▻https://github.com/VPenkov/okayNav/issues/4

toujours chelou la génération auto des tags à partir du flux :)
#flexbox #intégration #web #HTML #CSS #patterns #modèles

Merci, j’apprends beaucoup mieux avec des exemples très précis comme ça.

Est-ce qu’on sait comment ces modèles se déclinent quand on arrive sur un navigateur qui ne gère pas bien flexbox, ou pas la bonne version ? (parce que là le code contient juste le css « vanilla » officiel)

J’aimerais bien utiliser pour de vrai Flexbox lors de ma prochaine intégration (qui doit se faire vers avril normalement) ! Mais je ne voudrais pas trop péter sur tel ou tel navigateur (sans aller à IE6 hein évidemment huhu).

Il y avait ça comme projet de liste de patterns flexbox aussi :
▻http://seenthis.net/messages/338835

Mais il s’est arrêté à 6 cas… et ça n’a plus été mis à jour apparemment.

@rastapopoulos les tags pourris, c’est parce que j’ai finalement jeté mon compte Diigo, qui ne servait de relai de ma source Pinboard que pour Seenthis. Si un jour Seenthis supporte les tags façon Pinboard, ce sera mieux. Cf ►http://seenthis.net/messages/324311

Pour revenir au sujet : si tu utilises Autoprefixer, ça règle une bonne partie (voire tous ?) des problèmes de support dans les navigateurs un peu anciens qui utilisaient d’anciennes syntaxes.

ben en fait c’est les tags de pinboard qui ne sont pas standards :) Mais si tu trouves le temps de faire une PR qui teste proprement qu’il s’agit de pinboard et qui éclate alors le tag, on prend

Oui pour les tags, on avait vu que c’est Pinboard qui ne respecte pas la norme DC. (et donc ça peut très bien être un tag ayant plusieurs mots, ça existe parfaitement, et seenthis ne devrait pas discriminer ça)

Pour autoprefixer, je n’utilise pas encore, à appliquer après SCSS donc, mais ce n’est pas dans mon workflow pour l’instant (car je fais compiler les SCSS par SPIP, avec son Path). :(

Mais sinon les préfixes suffisent ? IE8 a plus de 1% du parc encore… (entreprises, mairies, toussa). Bon mais là mon projet au printemps c’est pour le grand public, donc ça va. Ça serait bien de s’y mettre enfin !

@fil je suis plutôt en mode allègement drastique de mes pet projects ces temps-ci (c’est très nécessaire), et clairement loin de tout code SPIP (et même PHP) depuis très longtemps, donc il y a objectivement peu de chance que je puisse proposer quoi que ce soit, désolé.

@rastapopoulos je ne suis pas sûr que les préfixes suffisent, notamment Firefox a eu 3 implémentations différentes…

Et du coup toi tu l’utilises @nhoizey, ou tu l’as déjà utilisé ou fait utilisé sur un « vrai » projet ? (pro ou perso peu importe mais avec des vrais visiteurs à la fin)

@rastapopoulos il y en a dans mon site perso et dans l’interface de mon jeu ►http://play.esviji.com notamment

C’est excellent !
▻http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/the-fab-four.html

Mais du coup, la question : finalement ça peut s’utiliser dans un site normal aussi cette technique : ça fait un peu comme une Element Query, mais qui n’aurait qu’un seul breakpoint possible, non ? Du coup pour les cas où ça suffit d’avoir juste deux versions (petit/grand écran), alors on peut utiliser cette technique à la place de certaines media queries ! (Et c’est possiblement mieux puisque ça utilise la taille de l’élément parent, pas du périphérique complet : element query quoi.)

#element_queries

Tout à fait !

#j'ai_rien_compris

#web_design #css

@fil ça se base sur la priorité des valeurs entre width, min-width et max-width. Suivant lequel est le plus grand ou plus petit, ce n’est pas le même qui va être réellement appliqué. Ça calcule une valeur de width qui est volontairement énorme mais soit positive (genre 38400) soit négative (-9600), du coup ce n’est jamais width qui est appliqué mais forcément soit min-width, soit max-width.

Mais sinon tu peux juste te contenter de l’appliquer, ça marche ! :D

Ça te permet de créer deux versions de taille (seulement deux, contrairement aux media queries où tu peux définir autant de variantes que tu veux) pour des blocs, mais suivant la taille du parent, et non pas suivant la taille du périphérique complet ! Donc c’est beaucoup plus précis (et ça marche en email du coup).

Sinon les « element queries » sont une des propositions d’amélioration de CSS en pourparlers par le groupe de travail Responsive :
▻http://ricg.io

@baroug

#flexbox #polyfill #intégration #web #CSS #javascript

#intégration #web #HTML #CSS #chronologie

le lien vers la démo est maintenant : ►http://timelined.betterexperience.site/demo.html

@cy_altern corrigé, merci :)

#intégration #web #CSS #flexbox

Je l’ai utilisé pour la refonte de mes thèmes et franchement, c’est bien puissant comme bousin !

pas encore adopté : si vous trouvez mieux faites signe

par contre dans les options on peut pas désactiver complètement le hover, qui est une mauvaise pratique : rien ne doit s’ouvrir sans clics explicites, car bouger la souris c’est pas un choix

bon après il sait utiliser hoverIntent, un autre plugin jquery, qui est moins pire, parce que ça attend avant de lancer l’action, histoire d’être sûr que la personne a vraiment mis la souris à tel endroit sans bouger exprès

mais ça serait quand même mieux de pouvoir désactiver complètement, et qu’à la souris ça soit exactement comme en tactile : cliquer sur la flèche explicitement

No Longer Maintained

(que faire ?)

Ah tiens en voilà un super
▻http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu

Non,il est uniquement en CSS apparemment, et donc entre autre, il ne fonctionne pas au clavier. Que ce soit avec tabulation, ou avec Entrée+flèches, ya aucun moyen d’atteindre les sous-menus en clavier.

Ah peut-être qu’il y en a au moins un correct là @fil :
▻http://seenthis.net/messages/395433

Avec le lien ?
►http://swissincss.com

ah merde je l’ai viré en pensant virer une scorie doublonnée…

#css #media_queries

C’est une réponse à cet article :
►http://seenthis.net/messages/433569

#intégration #HTML #CSS

 ;-)

L’article signale cette ressource intéressante pour les personnes qui utilisent ce genre de typos : ▻https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

Résumé :

– Quand on utilise la zone Unicode réservée aux trucs privés, si la fonte se charge mal, on a soit des rectangles pourris, soit des icônes n’ayant rien à voir (emojis, etc). Et si les utilisateurs (dyslexiques par ex) forcent une fonte propre à leur besoin, pareil, ça nique tout.

– Quand on fait bien les choses et qu’on utilise le bon caractère Unicode correspondant au dessin que l’on veut utiliser : beaucoup de lecteurs d’écran lisent la description du dessin ! Et le seul moyen de l’enlever est d’ajouter du « aria » dans le HTML en plus. Cela peut marcher dans certains cas, mais du coup impossible d’ajouter des icônes uniquement en CSS, dans le thème graphique.

Filament a produit une librairie utilitaire contenant CSS et JS nécessaire pour utiliser des fontes d’icônes de manière accessible :
▻https://github.com/filamentgroup/a-font-garde

Mais dans la solution de Filament, dans TOUS les cas d’utilisations, ils demandent à utiliser du HTML supplémentaire spécifique à l’icône. Donc d’après moi, c’est un peu pourri : impossible de faire le choix des icônes (ou pas) uniquement dans le thème graphique…

Sur le long terme, j’ai l’impression que la solution serait que tous les lecteurs d’écran prennent correctement en compte la propriété speak:none.
De cette manière, il suffirait :
1) d’utiliser un bon caractère unicode correspondant au mieux au dessin de chaque caractère de notre fonte d’icône (Fontello permet ça par ex), comme ça le fallback visuel serait bon (sauf s’il n’existe pas et dans ce cas faut utiliser la méthode fallback par image de Filament… galère)
2) d’appliquer sur tous les :before où on veut ajouter une icône, la directive speak:none

Mais actuellement même Caniuse.com ne contient pas les statistiques des propriétés orales de CSS… Il y a un ticket pour voter pour ça ici :
▻https://github.com/Fyrd/caniuse/issues/1515

Voilà, comment est-ce que vous allez faire à l’avenir vous ?

En ce qui me concerne, cela fait de nombreux mois que désormais mon HTML ne contient plus de scories pourries en rapport avec l’aspect graphique, que je n’utilise plus de classes genre « icon », « grid », ou je sais pas quelle merde comme ça, et que j’ajoute tout en CSS grâce aux préprocesseurs (exemple : a.super_lien{ @extend .icon; @extend .icon-super; }).
Du coup la solution de Filament m’embête vraiment…

#accessibilité #icônes #fontes #fonts #intégration #HTML #CSS

Et tiens cc @notabene @nhoizey pour intégration/accessibilité.

Pour ma part, les pictos sont en SVG inline, tout simplement. Si je devais me préoccuper de fallback (je parle de mes projets perso uniquement), j’utiliserais <picture> avec une source SVG et le fallback en PNG.

Merci @rastapopoulos pour le ping, je pensais l’avoir dans mes propres liens, mais ce n’est pas encore le cas…

Nan mais si c’est un truc avec des couleurs, etc, ben oui c’est une image, on l’utilise comme une image. Les icônes en fonte pour moi c’est clairement pour les pictogrammes : qui justement doivent suivre UNE couleur choisie en CSS (celle du texte courant très souvent, et parfois une autre), et à utiliser pour différencier des liens, des boutons, etc, tout en restant sobre.

[ Éditer ] [ Supprimer ]
versus
[ ✎ Éditer ] [ ✖ Supprimer ]

Et dans ces cas là, le fait d’en vouloir ou pas, et le fait de vouloir tels ou tels pictos : c’est un choix du thème graphique. Donc pour moi c’est entièrement au thème graphique de les activer ou pas, et de choisir quelles images ou pas. Sans RIEN changer au HTML (qui ne contient que des classes permettant de différencier le sens de divers liens par exemple, pas leur aspect : « supprimer », « favoris », « inscription », etc).

Le fait de devoir mettre des <img> (ou même des <span> vides) dans le HTML pour afficher des icônes et non des vraies images, c’est totalement carrément plus du hack (comme il dit dans le lien de départ), qu’utiliser des fontes en CSS. Le fait d’avoir ces pictos, c’est une aide visuelle pour aider à mieux distinguer certains éléments pour celleux qui ont des yeux, mais le lien ou bouton lui c’est juste « Éditer » (par ex).

Ah et faut ajouter (et ça a été écrit dans les commentaires) que les fontes informatiques, avec unicode, ont été faites pour contenir des lettres ET des pictos. Donc ce n’est absolument pas un hack du tout, c’est parfaitement prévu, et donc c’est aux navigateurs (visuels ET auditifs) et aux normes web (CSS), de savoir les gérer comme il faut.

Après pour les interfaces où on a des liens ou boutons qui n’ont QUE l’image/picto, là c’est encore autre chose. Mais pour le coup ça pose encore plus de problème ergonomique avant même l’accessibilité : une image seule, tant qu’on ne connait pas l’appli ou le site, difficile de savoir à quoi ça mène (et maintenant dans tous les trucs tactiles on a pas de bulle de survol puisque pas de survol, mais même pour celleux qui ont une souris, ce n’est pas normal de devoir déplacer sa souris un peu partout sur l’écran pour savoir ce que fait l’interface !), donc sauf cas rare et très précis, c’est pour moi de toute façon une mauvaise pratique.

Pourquoi les pictos devraient-ils n’avoir qu’une seule couleur ?

(oui, je sais, les fontes multicolores arrivent…)

Pour ce point, Fontello fait déjà tout ça pour toi, comme IcoMoon mais en logiciel libre et gratuit. Tu peux importer tes SVG perso, puis les sélectionner comme caractères, et leur assigner un code unicode. Ensuite ça te génère la fonte dans plein de formats, et le CSS qui va avec (comme IcoMoon encore une fois).

Une réponse là ▻http://seenthis.net/messages/435520
Mais qui ne prend pas en compte vraiment les problèmes d’accessibilité (juste utiliser le PUA ne suffit pas, puisqu’il y a le problème des fallbacks, et des polices forcées autrement). Or ce sont ces problèmes dont parlent en priorité l’article de départ.

L’explication plus technique de comment ils fonctionnent chez Cloudfour :
▻http://seenthis.net/messages/457318

Euh… Google Fonts propose déjà le téléchargement… je ne comprends pas…

Il est tout pourri le téléchargement de GF, tu as juste la font.

Tu as besoin de quoi d’autre ? ;-)

De la font dans tous ses formats, et le CSS qui va bien pour les importer ! Sinon il faut que je me refade les conversions via un truc comme FontSquirrel.

Le problème de ce dernier, en dehors de produire du CSS qu’il faut rebidouiller, c’est aussi qu’il change les polices. J’ai essayé d’enlever toutes les options que j’ai pu, sans succès.

Juste cliquer trois fois et avoir les polices en local, c’est nickel.

Personnellement je passe justement systématiquement dans FontSquirrel pour optimiser mes fontes, donc nous n’avons pas les mêmes attentes… ;-)

C’est ce que je faisais avant, mais ce qui m’a justement fait découvrir localfont c’est que FS change les fonts (et que je n’ai pas réussi à le faire oublier cette idée. Notamment sur Open Sans j’avais un résultat absolument horrible comparé aux originaux, quelles que soient les préférences. Aussi, pour ce qui est servi depuis GF je n’ai pas trouvé de différence de taille majeure (sur les quelques polices que j’ai testées).

Ok, je testerais donc quand même, à l’occasion… ;-)

#font #google #googlefonts #CSS #web #intégration

down du coup il reste l’alternative pointée par @fil ici ▻http://seenthis.net/messages/325302

Preparing for iOS 9 | The Official Ionic Blog
▻http://blog.ionic.io/preparing-for-ios-9

These issues are not present in iOS Safari, so mobile websites built with Ionic will not break. They are also not present in WKWebView, the new web view environment in iOS.

There is some good news here: Cordova will soon support WKWebView on iOS, which will bring some great performance and feature improvements to Cordova and Ionic apps.

N’empêche que nos applications là, elles ne fonctionnent plus sur iOS9 et ça me casse les pieds. J’ai un client qui trouve ça tellement con ces régressions qu’il me demande de ne plus porter son application sur mobile... vu que l’application fonctionne sans soucis dans les navigateurs...

Le plugin cordova-plugin-wkwebview-engine devrait corriger ça :
▻http://cordova.apache.org/news/2015/12/08/wkwebview-engine-plugin-release.html

Mais attention :
▻https://issues.apache.org/jira/browse/CB-10237?jql=project%20%3D%20CB%20AND%20labels%20%3D%20wkwebview-know

If your content src (the initial local file loaded in the webview) is in www/index.html, anything not under www will not load in the webview, even though it’s a file url.

For example, if you have a file url to a file in the Documents folder.

Et ça c’est super-lourd quand le site commence à être un peu compliqué.