Using pixels is not very polite
▻https://vasilis.nl/nerd/using-pixels-polite
“If you want to respect the users’ needs, and if you want to create truly fluid web stuff, don’t use pixels for font-sizes, measurements and mediaqueries.”
Using pixels is not very polite
▻https://vasilis.nl/nerd/using-pixels-polite
“If you want to respect the users’ needs, and if you want to create truly fluid web stuff, don’t use pixels for font-sizes, measurements and mediaqueries.”
Use the em and the rem for the right use cases
▻https://vasilis.nl/nerd/use-em-rem-right-use-cases
“The rem is perfect for properties of the design that should be consistent anywhere, regardless of the font-size. It’s not really suitable for other use cases”
Font sizing with rem could be avoided
▻http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided
“The main reason, I feel, behind using the 62.5% method is laziness, and that’s a good thing. Good developers are lazy. However that laziness is misguided; it’s actually causing you more work. You have to define font-sizes on all elements rather than just once and letting them inherit and you have to tackle those horrible inheritance issues when an explicitly sized element is placed inside another one.”
Moving from HTML Grid Systems to CSS Grid Systems
▻http://zellwk.com/blog/from-html-grids-to-css-grids
I’m assuming you already understand why you’re moving from a dom-littering HTML Grid system (like Bootstrap, Foundation or any framework out there) to a CSS Grid system (like Susy, Neat or even Flexbox with CSS)
#CSS_grid_HTML_class_mixin_Sass_semantic_concern_clevermarks
A Comprehensive Guide to Font Loading Strategies
►https://www.zachleat.com/web/comprehensive-webfonts
/web/img/avatar.png
La troisième guerre des navigateurs est terminée et c’est un bain de sang. Daniel Glazman
▻https://www.youtube.com/watch?v=ceMLuRBn--M
Rappel historique des batailles passées, et démonstration que c’est toujours la merde avec Chrome.
#web #navigateurs #Google #Chrome #monopole #standardisation #W3C #internet #HTML #CSS #Javascript #Daniel_Glazman
React, c’est document.write, c’est faire une UI dans le code, on revient 15 ans en arrière, c’est de la grosse merde, c’est n’importe quoi.
En résumé la situation est dégueulasse.
On est revenu à un monopole d’un grand vendeur qui en profite.
Amusant comme point de vue. Il y a pleins de développeurs qui ont tardé à se mettre au web et qui se sentent mieux avec React qu’avec n’importe quel autre truc mvc.
Ceci dit, je ne comprends pas que Firefox ne soit qu’à 10% de parts de marché. Vraiment étrange comme évolution.
J’ai quitté Firefox quand Chromium a débarqué, parce que le premier avait gonflé comme une grenouille orgueuilleuse et était devenu lourd, très lourd et gourmand : faignant, quoi !
À ce moment-là, Chromium était mieux. Puis, Chrome a eu du succès et il est devenu faignant ET inquisiteur.
Pendant ce temps, Firefox avait évolué : mieux pensé, plus complet et plus respectueux de la vie privée de ses utilisateurs.
Je pense que peu de gens ont fait marche arrière, voilà le problème.
Ouais Firefox est redevenu rapide, et comme il le dit, ça va apparemment l’être des dizaines de fois plus rapide dans pas longtemps. Mais ça sera pour 2 personnes. :(
@biggrizzly bah la raison est simple : parce que ce sont des imbéciles de développeurs :D, qui ne connaissent rien au web justement, et qui n’ont pas la culture dès l’origine de la séparation entre le sens des choses et comment on les présente. Donc ça correspond bien à ce qu’il dit, React revient 15 ans en arrière, avec de la présentation dans le code, donc logique que des devs adorent ça.
Il y aurait le choix parmi les navigateurs opensource, je dirai : pourquoi pas en changer, en effet. Mais en fait il n’y a pas le choix, et il n’y a jamais eu le choix.
Ceci dit, si Firefox devient très rapide, ça fera sans doute un argument que tous les frimeurs accepteront de prendre en compte « ah mais vous comprenez, mon temps est précieux, alors j’utilise le navigateur le plus rapide ».
J’ignore ce qu’ils font avec leur navigateur, à vrai dire. A moins que l’objectif soit d’avoir de la vidéo (de publicité) en même temps que des animations (de publicité) et du flash (de publicité). Tiens, d’ailleurs, je crois qu’un de ces jours, il faudra reconnaître l’apport fondamental au web de Apple, en bannissant le Flash de ses systèmes... et de tous les autres systèmes ce faisant. Ça vire du marché du développement tout un tas d’acteurs daubés.
Bref... Discussion (de ma part) sans intérêt... mais n’empêche quelle horreur de ne pas avoir plus de choix finalement. Ou plutôt, quel dilemme. On en a tous marre de devoir maintenir n développements, parce que tel navigateur ne fait pas les choses comme les autres... Mais on aimerait bien ne pas dépendre d’un seul éditeur.
Rétrospective très intéressante, en tous cas pour quelqu’un qui n’est pas du tout développeur web.
Et puis, il y a un petit côté j’apprends une langue étrangère…
- il chipe du multifrèdé
– pour ton poule riquoueste, file moi des métriques
– bah, c’est un pouchi qui trolle
C’est très exotique, mais est-ce qu’il n’existe pas une version avec un sous-titre moins imaginatif que celui-là
« en fait il est simplement tous les mêmes erreurs sap mentait pas la même culture mais l’erreur devenait tellement distribution d’eau etc qu’il était crucial pour autant commenter les mêmes erreurs quel est ton ascap là même qui datent export voilà pour que ls gros délires »
Enfin eu le temps de regarder. Et enfin compris pourquoi je me retrouve forcée, même sous linux à utiliser chrome pour certains sites et usages (et à fortiori sous android même rooté etc.) : ne marche que sous chrome , à l’ancienne. Apparté : quelqu’un dans le thread saurait m’expliquer pourquoi les nouveaux navigateurs (brave, servo) ne tournent que sous 64 bit ?
Finalement, après passage sous 64 bit, même Firefox est super rapide. Du coup, j’ai testé #brave sans conviction.
CSS Quiz
▻http://cssmojo.com/short_css-quiz
« A few questions to test your CSS knowledge »
Understanding #CSS #Timing_Functions – Smashing Magazine
▻https://www.smashingmagazine.com/2014/04/understanding-css-timing-functions
People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function!
Snapper: A CSS Snap Points Carousel
▻https://www.filamentgroup.com/lab/introducing-snapper.html
Snapper is a lightweight script that’ll apply CSS and JS carefully to create a broadly-functional snap-points carousel. This script builds on a simple overflow container and native CSS snap points to make it better
Flex Layout Attribute (FLA)
▻http://progressivered.com/fla
Layout helper based on #css #flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — ’layout’ and ’self’:
<div layout="direction vertically-horizontally reverse">
<div self="size align"> ... </div>
</div>
Demo: Pure CSS speech bubbles – Nicolas Gallagher
▻http://nicolasgallagher.com/pure-css-speech-bubbles/demo
All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.
Truly Fluid Typography With vh And vw Units – Smashing Magazine
▻https://www.smashingmagazine.com/2016/05/fluid-typography
Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.
Also some neat simple calc()
for vertical rhythm. Might try this out on berjon.com.
Nous on a testé un truc du genre sur un dernier site :
font-size: calc(.9375em + .4vw);
Pour moi c’est une révélation. Je m’y mets demain :-)
#merci pour ce lien et pour le commentaire.
Internet Explorer 11.0.9 et #seenthis ne s’aiment pas, mais pas du tout.
J’ai pris un joli Lenovo Ideapad avec écran tactile et Windows 8.1 pour voir commenr le web se présente au commun des consommateurs. Je constate que l’état de seenthis/#SPIP est accablant. Il est prèsque impossible de participer aux discussions.
D’abord on a l’impression que les commentaires ne sont pas enrégistrés parce qu’une foi qu’on appuié sur le bouton enrégistrer il ne se passe plus rien. On voit apparaître son commentaire seulement une fois la page rechargée.
Impossible d’éditer ou de supprimer notre commentaire, les liens respectifs sont et restent invisibles. Après plusieues essais je remarqe qu’ils apparaissent tant que j’appuie sur la bordure inférieure de l’article, mais dès que j’éloigne mon doigt ils se cachent à nouveau.
Dommage, il faut d’abord passer un cours d’apprentissage internet avancé avant de pouvor utilser #seenthis. Je crains que ce soit ce genre de détail qui nous enferme dans un petit monde contestataire composé de gens qui aiment tout prendre en mains, bricoler des trucs et relever les défis.
Est-ce que c’est difficile d’améliorer ces détails ?
#bug #html5 #css #dom #Internet_Explorer
Je teste, Windows 7, IE 11.0.9600. Pour le moment, tout se passe bien.
:-)
@Klaus : l’assistance à la saisie des pseudos fonctionne elle aussi.
Par contre, j’ai désactivé le truc McAfee en ouvrant IE.
En effet, souci de validation des commentaires.
Mais je peux les modifier. Et les effacer.
@biggrizzly Merci, alors IE présente des comportements aléatoires. Chez moi c’est une instance d’IE toute neuve jamais utilisée avant.
Conclusion : quand on ne prend pas les choses en mains on est dans la m...
Almost complete guide to #flexbox (without flexbox) | Kenan Yusuf
▻http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
Unfortunately, not everyone has a browser/device capable of viewing flexbox layouts. This is a cheatsheet-esque guide that offers backwards compatible alternatives to flexbox properties.
#css
stylelint - stylelint.io
▻http://stylelint.io
A mighty, modern #css linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
Hey @seenthis je n’arrive pas à supprimer le spam ci dessus (peut-être parce que le compte en question a été supprimé ?).
Ha ben il suffisait de le mentionner pour qu’il disparaisse, va comprendre... ^^
Au rayon #typographie et #CSS, la nouveauté importante des dernières versions de Safari, c’est l’introduction de la CSS font-feature-settings
:
▻http://caniuse.com/#feat=font-feature
Avec ça, tous les gros navigateurs du marché peuvent maintenant activer les features des polices OpenType.
Et comme depuis quelques temps le format recommandé pour intégrer des polices aux pages Web, c’est le WOFF et WOFF2, qui sont de l’OpenType compressé, on peut commencer à systématiser l’utilisation d’OpenType dans les pages Web.
Importing #CSS #Breakpoints Into #JavaScript | Lullabot
▻https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
Importing CSS Breakpoints Into JavaScript
There are a lot of challenges within responsive web design, and one that that has constantly been a pain is triggering JavaScript based on the current CSS media query breakpoint. The problem is that the breakpoints are in CSS, which JavaScript has no native way to access. Many solutions (including window.matchMedia(), and Enquire.js) involve declaring your breakpoints in both CSS and JS, or require IE10+. The problem with these solutions is that when you change a breakpoint value, you have to change it twice. However, it doesn’t need to be like this.
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é…).
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.
Balloon.css — CSS tooltips for HTML elements
►http://kazzkiq.github.io/balloon.css
Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.
CSS only Responsive Tables – David Bushell – Web Design & Front-end Development (based in Manchester, UK)
▻http://dbushell.com/2016/03/04/css-only-responsive-tables
Four years ago I shared an idea to make tabular data responsive. Browser support was experimental and the workarounds were extremely hacky. I revisited the technique this week, cleaned it up, and I am pleased to say all modern browsers work perfectly.
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.
Use rems for global sizing, use ems for local sizing
▻http://clagnut.com/blog/2384
“The beauty of the em in CSS is that it provides a unit of length which relates directly to font size. Ems remain fundamental to modern web design. As you will see throughout this book, ems enable you to design truly scalable web pages, which is why we are introducing you to them before we go any further.”
GitHub - VPenkov/okayNav: The world’s okayest #responsive navigation
▻https://github.com/VPenkov/okayNav
This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.
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
Flexbox Patterns
▻http://www.flexboxpatterns.com
Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.
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.
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
Des choix radios en faux-boutons, uniquement en CSS
▻http://notabene.github.io/accessibilitytests/hiddeninputs
Une suite de tests pour trouver la meilleure solution, par @notabene. Qui apparemment en a trouvé une !
C’est classe !
#intégration #web #HTML #CSS #accessibilité
The future of loading CSS - JakeArchibald.com
▻https://jakearchibald.com/2016/link-in-body
Chrome is intending to change the behaviour of <link rel="stylesheet">, which will be noticeable when it appears within <body>. The impact and benefits of this aren’t clear from the blink-dev post, so I wanted to go into detail here.