How to disable faux weights with CSS and font synthesis
https://andersnoren.se/how-to-disable-faux-weights-with-css/
body { font-synthesis: none; }
Liens en vrac
Quelques 337 marque-pages glanés pendant ma navigation sur le Web.
Modifier le style par défaut des boutons radio
https://paulmakeswebsites.com/writing/shadcn-radio-button/
input[type="radio"] {
/* Disable the browser’s default radio button styles */
appearance: none;
margin: 0;
/* Recreate the circle container */
border: 1px solid black;
background: white;
border-radius: 50%;
/* Center our dot in the container */
display: inline-grid;
place-content: center;
/* Use a pseudo-element to display our “dot” */
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/* And display it when the radio button is checked */
&:checked::before {
background: black;
}
}
/* Disable the browser’s default radio button styles */
appearance: none;
margin: 0;
/* Recreate the circle container */
border: 1px solid black;
background: white;
border-radius: 50%;
/* Center our dot in the container */
display: inline-grid;
place-content: center;
/* Use a pseudo-element to display our “dot” */
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/* And display it when the radio button is checked */
&:checked::before {
background: black;
}
}
Alternatives en local à Postman
https://blog.shevarezo.fr/post/2025/10/22/alternatives-postman-local-first-sans-compte
Naming — Design good practices
https://goodpractices.design/guidelines/naming
Rules for writing software tutorials
https://refactoringenglish.com/chapters/rules-for-software-tutorials/
Using border-image to apply and overlay gradient
https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/
Il est possible d’utiliser la propriété CSS « border-image » pour facilement ajouter un fond sur une image et faciliter le contraste avec le texte.
.overlay {
border-image: fill 0 linear-gradient(#0003,#000);
}
.overlay {
border-image: fill 0 linear-gradient(#0003,#000);
}
One-minute CSS tutorials
https://codyhouse.co/nuggets
Dans le même genre : https://css-shape.com/
E-mails HTML modernes : en finir avec les tables
https://www.teotimepacreau.fr/blog/emails-html-modernes/
« Nous prenons en compte seulement les clients Apple Mail, Gmail et Outlook qui couvre ainsi 90 % des lecteurs de mails dans le monde. Nous utiliserons des règles CSS/HTML supportés à minima part 70 % de tout les clients mails. »
Plus besoin d’utiliser des <table>, les <div> sont bien supportées. Les styles sont préférablement en “inline”, car en cas de transfert le <style> est supprimé.
Plus besoin d’utiliser des <table>, les <div> sont bien supportées. Les styles sont préférablement en “inline”, car en cas de transfert le <style> est supprimé.
Sqids (formerly Hashids) · Generate short ID from numbers
https://sqids.org/
Comment formater les nombres en Javascript
https://blog.shevarezo.fr/post/2023/02/01/javascript-comment-internationaliser-nombres
new Intl.NumberFormat(navigator.language).format(123456.78);
123456.78.toLocaleString();
123456.78.toLocaleString();
An interactive guide to flexbox
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
Un guide avec des exemples interactifs sur l’utilisation et les propriétés de flexbox en CSS.
Shell script best practices
https://sharats.me/posts/shell-script-best-practices/
Des recommandations pour écrire des scripts bash.
Defensive CSS
https://ishadeed.com/article/defensive-css/
“Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or a weird behavior.
Defensive CSS is a collection of snippets that can help you in writing CSS that is protected. In other words, you will have fewer issues in the future. If you follow my blog, you might read an article I wrote a while back which is called “The just in case mindset”. This is built upon it, and will be an ongoing list of snippets.”
Defensive CSS is a collection of snippets that can help you in writing CSS that is protected. In other words, you will have fewer issues in the future. If you follow my blog, you might read an article I wrote a while back which is called “The just in case mindset”. This is built upon it, and will be an ongoing list of snippets.”
RFC 3339 vs ISO 8601
https://ijmacd.github.io/rfc3339-iso8601/
Visualisation (et tableau complet) des différents formats de dates selon la RFC 3339 ou la norme ISO 8601.
JavaScript : prévisualiser une image avant l’upload
https://www.akilischool.com/cours/javascript-previsualiser-une-image-avant-lupload
CSS Tips
https://markodenic.com/css-tips/
• Typing Effect
• Drop shadow
• Smooth scrolling
• Center
• Cursors
• Truncate text
• …
• Drop shadow
• Smooth scrolling
• Center
• Cursors
• Truncate text
• …
5 powerful tips and tricks for print style sheets
https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/#print-qr-codes-for-easy-url-references
Lorsqu’un visiteur de votre site imprime une page de votre site, ça peut être pratique d’ajouter un code QR avec l’URL de la page.
Google propose une API pour générer un code QR :
> https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8
Google propose une API pour générer un code QR :
> https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8
Always bet on HTML
https://gomakethings.com/always-bet-on-html/
Où j’apprends ces nouveaux éléments HTML :
— <details> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/details
— <datalist> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist
— <details> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/details
— <datalist> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist
Comment cibler en CSS Internet Explorer 10 et 11
http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5
Trouvé via https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ :
> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}
> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}
Stop setting the language of your website based on user location
https://dev.to/bitdweller/stop-setting-the-language-of-your-website-based-on-my-location-31h0
Il est plus judicieux de se baser sur les langues acceptées par le navigateur de l’utilisateur que sa position pour déterminer sa langue…
En JavaScript, c’est facile :
> var userLang = navigator.language || navigator.userLanguage;
En JavaScript, c’est facile :
> var userLang = navigator.language || navigator.userLanguage;