Animate to height/width auto (without hacks)
▻https://css-tip.com/animate-height-auto
Only three lines of code and you have a smooth transition to height: auto
interpolate-size: allow-keywords; oO
#css
-
-
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.
-
-
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
-
-
@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.
-
-
#CSS #Grid #Areas
▻https://ishadeed.com/article/css-grid-areaPour les personnes qui comme l’auteur ont du mal à se rappeler des références des
1fr:)Perso je m’étais bien amusé à apprendre ça avec ▻https://seenthis.net/messages/702365
-
An Interactive Guide to #CSS #Container_Queries
▻https://ishadeed.com/article/css-container-query-guideCSS container queries help us to write a truly #fluid #components that change based on their container size. In the next few years, we’ll see less media queries and more container queries. Of course, using media queries will still be useful for general layout stuff.
-
Zoom, zoom, and zoom | OddBird
▻https://www.oddbird.net/2024/07/09/zoomiesI’m working on an article about fluid typography, and relative units. But instead, I fell down this rabbit hole – or a cleverly-disguised trap? – trying to understand ‘zoom’ in the browser (not Zoom™️ the software). Since I couldn’t find any up-to-date articles on the subject, I thought I should write one.
-
#CSS #Grid #Generator
▻https://cssgridgenerator.ioCSS grid generator is a tool that helps developers create custom CSS grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size.
-
#Fluid_typography with discrete #steps
▻https://css-tip.com/fluid-typographyUse the round() function and create a fluid typography with a discrete function instead of a continuous one.
Define the step and get precise values within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!
/* Instead of */
p {
font-size: clamp(1rem,1rem + 3vw,2.5rem);
}
/* use */
p {
font-size: clamp(1rem,round(down,1rem + 3vw,2px),2.5rem);
}
#css
-
Je ne vois pas de quel « rounding issue » ça parle : certes j’ai un écran haute densité qui a tendance à masquer les problèmes de rendu, mais il ne me semble pas qu’on ait des problèmes de rendu parce qu’on essaie d’afficher une fonte à 16.33333px.
-
Very useful if you have some calculation based on the font-size like using the em unit
-
-
-
Type Fluidity
▻https://wearerequired.github.io/fluidityGenerator for #CSS #clamp values for #fluid_typography sizes.
-
Let’s make a #floating #button sign up form pattern - Piccalilli
▻https://piccalil.li/blog/lets-make-a-floating-button-sign-up-form-pattern -
#CSS #Pattern : Fancy #backgrounds with CSS #gradients
▻https://css-pattern.comThe biggest collection of background Patterns
Explore 144 CSS-only patterns made with CSS gradients and optimized with CSS variables.
You can also surprise yourself with a random CSS Pattern! ▻https://random.css-pattern.com
Toujours par l’auteur de ►https://css-tip.com dont on causait ici ►https://seenthis.net/messages/1001462
-
Il faut pas oublier la version animée : ▻https://animated.css-pattern.com
Ça pourrait servir à faire des fonds d’écran de connexion aussi :)
On pourrait possiblement aussi imaginer une saisie qui reprendrait tous les types et qui permettrait de les configurer, et ça donnerait une config à utiliser pour un thème ou un écran.
-
-
The Ultimate CSS Shapes Collection
▻https://css-shape.comThe Ultimate Collection of CSS-only Shapes
Pure #CSS #shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!
Par l’auteur de ►https://css-tip.com dont on causait ici ►https://seenthis.net/messages/1001462
-
Designing better target sizes
▻https://ishadeed.com/article/target-sizevia @b_b
#intégration #web #ergonomie #clic #UX #accessibilité #CSS
-
CSS Button Styles You Might Not Know - David Bushell
▻https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know.button,
::file-selector-button {
inline-size: fit-content;
touch-action: manipulation;
user-select: none;
}
* {
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px solid magenta;
outline-offset: 2px;
}
}-
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 -
-
-
A Complete #CSS Tutorial: Mastering the Art of Web Styling
▻https://itcodestuff.com/a-complete-css-tutorial-mastering-the-art-of-web-stylingHello Guys, Cascading Style Sheets (CSS) are an essential part of web development. They enable web designers to control the presentation and layout of web ... Read more
-
The truth about #CSS selector performance
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article.
Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance.
Avec un outil (pas encore testé) permettant de mesurer tout ça.
▻https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance
via ▻https://hachyderm.io/@cvennevik/111997002061348375
#web
-
How To #Center a Div
▻https://www.joshwcomeau.com/css/center-a-divBefore we wrap up, let’s summarize what we’ve learned by building a sort of decision tree, so that we can figure out when to use which method.
– If we want to horizontally center a single element without disturbing any of its siblings, we can use the Flow layout auto margin strategy.
If we have a piece of floating UI, like a modal or a banner, we can center it using Positioned layout and auto margins.
– If we want to center a stack of elements one on top of the other, we can use CSS Grid.
– If we want to center text, we can use text-align. This can be used in conjunction with any of the additional methods.Finally, in most other situations, we can use Flexbox. It’s the most versatile method; it can be used to center one or multiple children, horizontally and/or vertically, whether they’re contained or overflowing.
#css
-
CSS : comment appliquer une autre font à certains caractères ?
Je travaille sur un projet de plusieurs centaines de pages avec beaucoup d’endroits où le numérique est là et peut être combiné à des lettres.
L’équipe design m’a demandé si on pouvait mettre une typo différente pour les chiffres. J’ai d’abord proposé le font-variant-numeric qui peut permettre de les gérer avec du tabular-num. Mais l’espacement n’est pas forcément idéal avec la font utilisée.
J’ai continué de creuser et j’ai trouvé comment utiliser une font spécifique uniquement pour certains caractères. J’ai fait un Codepen pour partager ;-) Comme indiqué dedans, il faudra s’y prendre autrement si vous passez par une font que vous appelez chez Google.
PS : j’ai mis le Arial Black en font pour les chiffres et je m’aperçois qu’on ne verra pas forcément la différence sur mobile (ça ne doit pas être dans les font déjà enregistrées sur les mobiles) mais sur un ordi, vous devriez voir
-
merci @aurelie
@font-face {
font-family: "NumericFont";
src: local("Arial Black");
/* https://fr.wikipedia.org/wiki/Table_des_caract%C3%A8res_Unicode_(0000-0FFF)
On peut faire de la même façon pour n'importe quel caractère */
unicode-range: U+30-39; /* chiffres de 0 à 9 */
}
-
-
The Complex But Awesome CSS border-image Property
▻https://www.smashingmagazine.com/2024/01/css-border-image-propertyDid you know border-image property was such a powerful — and flexible — CSS property? Despite the challenge it takes to understand the syntax, there are ways to keep the code clean and simple. Plus, there is often more than one “right” way to get the same result. It’s a complicated and robust CSS feature.
via la-grange.net
-
plein de trucs sympa, merci !
-
Very complex indeed ^^
Mais des trucs bien sympas cf :
Our first experiment is to add a gradient overlay above an existing background. This is a fairly common pattern to improve the legibility of text by increasing the contrast between the text color and the background color.
.overlay {
border-image: fill 0 linear-gradient(#0003,#000);
}Our next example is a common design pattern where we want the background of an element to extend to the screen’s full width. We often refer to this as a “break-out” background because the element typically needs to break outside the constrained width of its parent container in order to stretch across the full screen.
.full-background {
border-image: conic-gradient(pink 0 0) fill 0//0 100vw;
}Pour référence, c’est la personne qui partage ses tips sur ►https://seenthis.net/messages/1001462
-
-
-
CodePen - CSS clip-path Editor
▻https://cdpn.io/stoumann/fullembedgrid/abZxoOM?animations=run&type=embedun outil simple pour créer des règles CSS
clip-pathvisuellement -
The untold history of web development:
▻https://functional.cafe/@juliobiason/111613996060167180The untold history of web development:
1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites(by @fireship_dev on Birdsite)
-
An Interactive Guide to #CSS #Grid
▻https://www.joshwcomeau.com/css/interactive-guide-to-gridIn this tutorial, I’m going to share the biggest lightbulb moments I’ve had in my own journey with CSS Grid. You’ll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it.
To break things down even further:
– justify — deals with columns.
– align — deals with rows.
– content — deals with the grid structure.
– items — deals with the DOM nodes within the grid structure. -
Dans les #CSS Text Level 4, il y a l’alignement vertical (dans des tableaux) selon un caractère (la virgule ou le point des nombres décimaux par exemple):
▻https://www.w3.org/TR/css-text-4/#character-alignmenttext-align: "." center -
Choisir entre balance et pretty pour text-wrap - Alsacreations
▻https://www.alsacreations.com/astuce/lire/1920-Choisir-entre-balance-et-pretty-pour-text-wrap.htmlGestion des retours lignes automatique en CSS : utiliser les valeurs
balanceetprettypour la propriététext-wrap#CSS #text-wrap #pretty #balance #web_dev #présentation_texte #justifier #retour_ligne
-
Il est déconseillé de l’utiliser pour les grands paragraphes car cela peut entraîner une perte de performance, le navigateur ayant besoin d’effectuer plus de calculs que d’habitude.
En fait c’est plus net encore :
text-wrap: balancene s’applique que sur les paragraphes de six lignes maximum. Ce n’est pas conçu pour maquetter des paragraphes (sa logique même, graphiquement, ne correspond pas à des paragraphes de texte courant), mais des titres et intertitres.
-
-
Suppression de l’AME : 3 500 médecins prêts à « désobéir » si le texte est voté
▻https://www.leparisien.fr/politique/suppression-de-lame-3-500-medecins-prets-a-desobeir-si-le-texte-est-vote--
Les refus de soins opposés aux bénéficiaires de la complémentaire santé solidaire et de l’aide médicale de l’État - Un testing portant sur une première prise de rendez-vous médical par téléphone auprès des généralistes, des ophtalmologues et des pédiatres
▻https://drees.solidarites-sante.gouv.fr/publications-communique-de-presse/les-dossiers-de-la-drees/les-refus-de-soins-opposes-aux
-
-
#Transition #animations: a practical guide | by Dongkyu Lee | Oct, 2023 | #UX Collective
▻https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659
https://miro.medium.com/v2/resize:fit:1100/1*4e0H-Ej4oixTlBtJaZqUBw.gif 
https://miro.medium.com/v2/resize:fit:640/1*SzelHcIP8R-w3eku3P04Bg.gif 6 principles for better transition animations
– Fade in and out with opacity
– Scale to add liveliness
– Maintain consistent directionality
– Balance speed
– Prioritize, order, and group
– Establish spatialityAccording to some articles, a speed from 100ms to 500ms is ideal and suitable for most cases.
#css
