Comment se passer de jQuery.spip.positionner_marge
▻https://git.spip.net/spip/spip/commit/9f50bd16bfce863b0db3393ca27c0df6de6a251a & du plugin ancres douces à la fois :
html {
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
Comment se passer de jQuery.spip.positionner_marge
▻https://git.spip.net/spip/spip/commit/9f50bd16bfce863b0db3393ca27c0df6de6a251a & du plugin ancres douces à la fois :
html {
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
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 :)
Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
▻https://stripesgenerator.com
Générateur de rayures en background-image « pure CSS »
Voir aussi Mozdev pour la doc de linear-gradient : ▻https://developer.mozilla.org/fr/docs/Web/CSS/gradient
#CSS: Flexible Repeating #SVG Masks
▻https://tylergaw.com/blog/css-repeating-svg-masks
▻https://tylergaw.com/blog/assets/post-image-repeating-masks-streetcred-banner.webp
This is a technique I used recently to create a flexible, repeating pattern using SVG with CSS mask.
A #flexible #header with a little squiggle at the bottom instead of a straight line.
Hello, CSS Cascade Layers - Ahmad Shadeed
▻http://ishadeed.com/article/cascade-layers
In this article, we’ll explore how #cascade_layers work, and how they will help us write #CSS with more confidence, along with use-cases and examples.
In the layers panel, notice how each button lives in a layer. The order is per the @layer definition at the top.
When the order of layers is changed, the components layer will override the variations one. As a result, the default button style will win.
https://ishadeed.com/assets/cascade-layers/cascade-layers-3-1.png https://ishadeed.com/assets/cascade-layers/cascade-layers-4.png
Enfin une explication claire de ce truc, ça y est, je peux dire que j’ai capté le bouzin ^^
Je savais même pas que ça existait mais maintenant j’ai capté quand même.
#intégration #web #layer
Responsive and #fluid_typography, the easy way
▻https://codepen.io/renevanderlende/details/YzEaKvO
:root { font-size: calc(0.658vmin + 0.75rem) }
Sur le même sujet j’ai aussi vu passer ▻https://piperhaywood.com/fluid-type-sizes-and-spacing & ▻https://css-tricks.com/consistent-fluidly-scaling-type-and-spacing qui proposent des solutions « un peu plus complexes ».
Et une autre ressource sur le sujet à base de css clamp :
▻https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp
L’auteur a fait un outil pour tester et jouer avec les valeurs à utiliser ▻https://modern-fluid-typography.vercel.app
#Flexbox Dynamic Line #Separator - Ahmad Shadeed
▻http://ishadeed.com/article/flexbox-separator
To make this work on all screen sizes, we need to have the flex-direction: column mobile and flex-direction: row for larger screens.
.section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.section:before {
content: "";
border: 1px solid #d3d3d3;
align-self: stretch;
}
@media (min-width: 700px) {
.section {
align-items: center;
flex-direction: row;
}
}
#css
Here’s what I didn’t know about :where() - Manuel Matuzović
▻https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where
It feels like using a shorthand property instead of longhand properties; fewer lines of code, but harder to process. I didn’t get the point, but a few days ago it clicked.
:where(header, main, footer) p:hover {
color: red;
}
Perso, i get the point rien que pour ça :p
#css
2022 s’annonce plutôt bien du côté du #CSS ! 🥳🥳🥳
Quelqu’un a déjà testé les color-function() ?
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--color-functions
Quand ce sera bien opérationnel, ça me facilitera beaucoup les choses avec la personnalisation qu’on propose à nos clients.
J’espère aussi que les #viewport units mettront fin aux soucis #Safari sur #smartphone ☺
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--viewport-units
Vous avez repéré quoi en particulier ?
#integration #integrationWeb #ui #HTML #responsive #variables
A Clever #Sticky #Footer Technique | CSS-Tricks
▻https://css-tricks.com/a-clever-sticky-footer-technique
▻https://css-tricks.com/wp-json/social-image-generator/v1/image/357053
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;
}
#css
Paged.js — About Paged.js
▻https://www.pagedjs.org/about
Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!
Une librairie javascript pour paginer le HTML pour générer du PDF « joli »
– le repo Gitlab : ▻https://gitlab.pagedmedia.org/tools/pagedjs
– la documentation : ▻https://www.pagedjs.org/documentation
– les spécifications CSS « Paged Media Module Level 3 » supportées : ▻https://www.pagedjs.org/documentation/cheatsheet
– une étude de cas complète pour la création/mise en page d’un livre : ►https://polylogue.org/apres-la-page-la-double-page
– rendu testable sur ►https://printcss.live
PrintCSS.live - The PrintCSS Playground
►https://printcss.live
Une interface de comparaison du rendu des différentes librairies de génération de PDF à partir de HTML
Reducing The Need For Pseudo-Elements — Smashing Magazine
▻https://www.smashingmagazine.com/2021/09/reducing-need-pseudo-elements
For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave #pseudo-elements behind in some scenarios, thanks to newer #CSS properties. Pseudo-elements still have a place. This article is not “never use pseudo-elements” but rather “we no longer have to use pseudo-elements as much”. We can style a number of popular user interface elements without the need for pseudo-elements. By relying less on pseudo-elements, we can write less CSS, eliminate nested elements, ignore stacking context issues, and forget about positioning.
Quelques cas pratiques sympas cf : #Angled Buttons, Button Wipes, Tiles With Screen Color #Overlays
« Marcel Moreau », c’est so frenchy
Sinon j’avais déjà lu sur cette propriété l’année dernière, mais ça va être tellement cool quand aspect-ratio
sera vraiment utilisable… (là ça n’est apparu que dans les navs de 2021, donc bon, en prod bof)
▻https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio
Designing Beautiful #Shadows in #CSS
▻https://www.joshwcomeau.com/css/designing-shadows
- Creating a cohesive environment by coordinating our shadows.
– Using layering to create more-realistic shadows.
– Tweaking the colors to prevent “washed-out” gray shadows.
La suite ▻https://www.joshwcomeau.com/css/introducing-shadow-palette-generator avec un générateur en ligne ▻https://www.joshwcomeau.com/shadow-palette
Par contre faut toujours connaitre la couleur de fond à chaque fois en avance (même si par variable).
“Welcome to the #W3C design system
This #design_system documents the styles, components and templates available to use on your website.”
Étonnant que personne ne l’ait encore partagé, #style_guide #css et tout ça...
github/shoelace-style/shoelace
▻https://github.com/shoelace-style/shoelace
« A collection of professionally designed, every day UI components built on a framework-agnostic technology. 🥾 »
«Styling in the Shadow DOM With CSS Shadow Parts» by Ollie Williams, 13.04.2020
▻https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts
Handling #Text Over #Images in #CSS - Ahmad Shadeed
▻http://ishadeed.com/article/handling-text-over-image-css
You might come across a UI component that has text above an image. In some cases, the text will be hard to read depending on the image being used. There are some different solutions like adding a #gradient overlay, or a tinted background image, text-shadow, and others.
Ça c’est le truc le plus fun dans mon boulot : tu peux être certain que quand le graphiste propose les maquettes au client où il y a du texte sur des images, il va à tous les coups choisir la plus belle image possible, avec de très beaux aplats de couleur (la mer bleue jusqu’à l’horizon, un grand champ de blé bien flou au premier plan…) sur lesquels il prendra bien soin d’installer son texte. Oh c’est beau. Et la première image que le client mettra en ligne sera évidemment une photo super-moche, avec des micro-contrastes épouvantables partout, et parfois même (oh joie) déjà du texte dans l’image elle-même. Évidemment le texte devient illisible, et c’est à toi de trouver fissa une solution magique.
L’autre caractéristique du texte sur une image, c’et que c’est souvent dans des blocs de dimensions fixes. Et là encore, le graphiste va soumettre des maquettes où les titre sont « Lorem ipsum », ou « Ici le titre ». Et le premier article que le client va publier sera titré « En réponse à la question posée par un interlocuteur à propos de la posture de notre entreprise quant au truc au nom duquel qu’on se positionne ». Et forcément, ça tient pas (mais le client veut désormais que ça tienne sans avoir à raccourcir son titre, tu penses bien).
(Et je pourrais ajouter que, même dans les exemples illustrés de l’article ci-dessus, on n’échappe généralement pas à des problèmes de lisibilité et d’accessibilité avec ces différentes solutions. C’est assez chiant, mais si on fait dans le subtile et joli comme ci-dessus, on sera toujours très très limite sur le contraste et la lisibilité, et donc l’accessibilité.)
C’est pour ça qu’on demande toujours un droit de regard sur les maquettes graphiques, pour faire des commentaires ergo/accessibilité :)
« Form design — Best practice, research insights and examples » by Geri Reid
▻https://gerireid.com/forms.html
« Working on a design system for a bank has taught me a lot about forms. I’ve watched testing in our labs. I’ve worked alongside experts from specialist accessibility organisations. I’ve seen forms tested by disabled people and users of assistive technology. I’ve also read a lot of research.
From all this learning I’ve formed my own forms best-practice guidelines. I thought it would be useful start recording it. Here’s my work in progress. I do UI/UX so I’m coming at this from a designer’s perspective. »
#ux #forms #css #webComponents #reference
« CSS and Network Performance » by Harry Roberts, 09.11.2018
▻https://csswizardry.com/2018/11/css-and-network-performance
Important for Custom Elements / Web Component authors: CSS @import performance is poor; the article describes why, in great detail.
« Summary: lazyload any CSS not needed for Start Render; avoid @import, in CSS especially; be wary of synchronous CSS and JavaScript order; load CSS as the DOM needs it. »
«Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
▻https://css-tricks.com/next-gen-css-container
« […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.
Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.
No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »
ça fait tellement d’année qu’on attend ça…
#CSS #intégration #web #responsive
Prefix free : Break free from CSS vendor prefix hell !
▻https://projects.verou.me/prefixfree/#
Un script JS Open Source qui se charge de générer les préfixes navigateurs dans les CSS et les style inlines.
Le repo Github : ▻https://github.com/LeaVerou/prefixfree
(une alternative quand on ne peut pas avoir Gulp qui le fait en amont...)
sachant que ça évite d’augmenter le CSS produit avec des lignes de préfixes (fichier plus léger bien sûr contrebalancé par le JS ajouté sauf que point suivant :), tout en marchant aussi pour les CSS que tu ne controles pas (plugins de ton CMS etc), et il ne se lance et ne travaille que sur les navs qui en ont besoin uniquement (les autres récents n’ont pas besoin de préfixes dans la CSS, et le JS ne fait rien pour eux)
c’est possiblement bien de ne même pas les générer dans gulp du coup
CSS Generators — Smashing Magazine
▻https://www.smashingmagazine.com/2021/03/css-generators
this week around we’ll be looking at useful #generators for everything #CSS: from #gradients to #drop-shadows and bezier curves to triangles and type scales. Just a few useful tools for your toolbelt, to keep close.
Ça faisait longtemps que j’avais pas vu un article intéressant passer sur smashing, quelques liens sympas :
▻https://brumm.af/shadows
▻https://9elements.com/blog/css-border-radius
▻https://codepen.io/yaphi1/pen/oNbEqGV
▻https://bennettfeely.com/clippy
▻https://animista.net
Dans les recoins de la double page (Paged.js à la maison, saison 2) | Polylogue
►https://polylogue.org/apres-la-page-la-double-page
XML est très intéressant, mais s’articule avec des outils d’écriture (traitement de texte, notamment). Or on ne peut faire abstraction de l’aspiration à sortir des traitements de texte, de la multiplication d’outils alternatifs. Inspiré par le html et aussi par les langages de balisage léger, comme Markdown (qui permet de constituer une structure simple de html standard sans avoir à subir visuellement le code, et a été créé pour faciliter l’écriture, ce qu’on appelle le flow, d’un blogueur), je me suis demandé si on ne pourrait pas utiliser le flux html + css pour faire le livre, mais également, pour proposer des modalités d’écriture et d’inclusion de l’auteur et du designer dans un processus éditorial.
Il ne s’agit pas d’automatiser la mise en page, c’est un point sur lequel j’insiste, car les flux html + css ont tendance à faire fantasmer certains éditeurs qui se disent qu’ils vont pouvoir automatiser d’avantage, voire se passer de compositeur. À eux je souhaite bonne chance, surtout s’ils sont un minimum exigeants sur la qualité de composition. Non, c’est une autre manière de composer, tout comme markdown offre une autre manière d’écrire que Word, l’idée restant de fournir au compositeur une palette suffisamment complète pour lui permettre de bien travailler. Les gens, leurs savoir-faire ont toute leur place, et il s’agit plutôt de leur proposer une palette alternative suffisamment complète pour qu’ils et elles puissent s’exprimer.
#intégration #web #livre #print #CSS #HTML #composition #édition #PAO #paged.js (je me souviens jamais des tags que je mets pour la PAO en mode web CSS, ya plusieurs seens là dessus déjà)
Je suis comme toi : #Web_design ?
J’avais bien mis tous les bons, manquait juste #impression :)
Cf :
►https://seenthis.net/messages/742687
►https://seenthis.net/messages/734575
artf/grapesjs : Free and Open source Web Builder Framework. Next generation tool for building templates without coding
▻https://github.com/artf/grapesjs
Un framework de templating par interface, mais autonome, pas propre à un CMS (comme Gutemberg ou autre). Ça peut servir à faire un CMS complet. Mais ça pourrait servir à faire aussi juste un logiciel de maquettage rapide aussi, mais… qui produit du HTML/CSS responsive du coup. Comme Bootstrap Studio, sauf que c’est en web et libre là… (vraiment ça fait tout pareil que bootstrap studio quasiment).
Peu aussi être inspirant pour les systèmes de blocs configurables, d’interface pour construire une page par blocs.
GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates.
#template #maquette #interface #blocs #HTML #CSS #responsive
ping @drbouvierleduc @smellup
Super outil, complètement personnalisable et qu’on peut utiliser pour plein de situations. On est en train de le mettre en place dans une appli web pour la partie éditoriale/marketing, comme ça on va contenter nos collègues qui sont habitués au confort de Wordpress (Gutemberg donc), qui est super bien foutu à ce niveau.
merci pour le retour :)
bon ça reste que pour enregistrer du HTML directement… il me semble que dans son genre Gutemberg fait mieux (même si très lié à WP donc difficile d’utiliser ailleurs) : ça sérialise des paramètres, qu’eux mettent à plat avec leur format (des commentaires HTML avec du JSON) mais qu’on pourrait parfaitement décider d’enregistrer comme on veut + des styles CSS générés (avec un id unique pour chaque bloc). Et du coup ça peut possiblement générer autre chose que du HTML ou ça peut être personnaliser (si jamais pour un bloc ayant tel sens, on voudrait que ce soit pas « div » mais « section » ou « blockquote » un autre jour ou dans tel autre contexte qu’une page web).
Enfin bon c’est très intéressant à creuser quand même. Ne serait-ce que pour faire du maquettage rapide (mais est-ce qu’il existe un vrai logiciel qui utilise déjà cette lib pour faire ça ? ou même pour éditer des pages en général tout court, que ce soit maquette ou vraie page… un frontpage moderne en webapp quoi)
Oui le souci de Gutemberg c’est qu’il faut sortir de wordpress. On a cherché plusieurs outils pour faire le même taf (sans tout redévelopper) et GrapesJS est ce qu’on a trouvé de mieux, même si c’est pas tout à fait ce pour quoi il est prévu à la base. On a adapté ça avec notre CSS custom et donc en quelques instants on peut construire une page assez librement tout en étant contraint par notre design system.
Pour le maquettage pur sinon, il y a Penpot qui vient de sortir : ►https://penpot.app
oui déjà signalé ici :) ►https://seenthis.net/messages/900030
Mais justement Penpot ne produit PAS du HTML CSS responsive mais des SVG, de l’image… Alors que c’est tout l’intérêt de maquetter directement en HTML, c’est de base responsive, mobile first, etc. (ce que fait Bootstrap Studio, mais dans un soft pas libre, et pas collaboratif, pas non plus versionnable avec git, etc)
Clairement oui, le but premier de GrapesJS c’est de pouvoir maquetter directement en HTML+CSS, après je l’ai pas utilisé dans cette optique et je sais pas ce que ça vaut par rapport à Bootstrap Studio (pas utilisé non plus).
Things You Can Do With #CSS Today — Smashing Magazine
▻https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today
The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. In this article, we’ll look into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties.