Styling Tables the Modern CSS Way
▻https://piccalil.li/blog/styling-tables-the-modern-css-way
Creating good-looking tables on the web can be fiddly at times. We’re going to run through some tips and gotchas for building simple and complex tables in HTML and CSS, and where modern CSS can help us.
#css
#Overflow Clip
▻https://ishadeed.com/article/overflow-clip
When the overflow is set to hidden on one axis, say overflow-y, the other axis overflow-x will become auto by default, resulting in clipping both sides. This behavior isn’t always desired. In some cases, we want clipping on only one axis. Additionally, the other axis will become scrollable, which may lead to unexpected results.
This is where the clip value becomes helpful.
#css
#Full-bleed layout with modern #CSS
Use modern CSS and a few lines of code to create a full-bleed layout.
Full-bleed? It’s when an element needs to bleed outside the main container and extend to the edge of the page.
html {
container-type: inline-size;
}
main {
--w: 600px; /* the max-width */
--m: 1em; /* margin on small screen */
margin-inline: max( var(--m),(100cqw - var(--w))/2);
}
.full-bleed {
margin-inline: min(-1*var(--m),(var(--w) - 100cqw)/2);
}
Gaffe : c’est avec des unités de container (92% d’adoption pour l’instant).
Est-ce que ça apporte quelque chose de plus que ce qu’on avait déjà avec :
.spip_documents.max {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}Sinon, sauf erreur, la division par deux suggère encore que c’est prévu pour fonctionner uniquement si la colonne de texte est elle-même centrée horizontalement dans l’écran (même marge à gauche et à droite), c’est généralement la limite de cette méthode (si la colonne de texte n’est pas au centre, on peut y arriver, mais faut faire des maths).
#3D #parallax effect on #hover
▻https://css-tip.com/3d-parallax-effect
Un petit effet « wow ! »
img {
--s: 300px; /* the image size */
width: var(--s);
aspect-ratio: 1;
box-sizing: border-box;
padding-inline: calc(var(--s)/10) 0;
object-fit: cover;
border-radius: 20px;
transform: perspective(350px) rotateY(calc(var(--_i,1)*10deg));
transition: .5s;
}
img:hover {
--_i: -1;
padding-inline: 0 calc(var(--s)/10);
}#css
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-area
Pour 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-guide
CSS 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/zoomies
I’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.io
CSS 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-typography
Use 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/fluidity
Generator 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.com
The 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.com
The 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-size
via @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-styling
Hello 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-div
Before 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-property
Did 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=embed
un outil simple pour créer des règles CSS clip-path visuellement
The untold history of web development:
▻https://functional.cafe/@juliobiason/111613996060167180
The 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)