#css

Seven different types of #CSS #attribute #selectors

via ▻https://gist.github.com/emmabostian/ed933bc7f9711acdc565f42f1b159407

/* This attribute value has a specific value of cool or contains the word cool in a space-separated list */
[value~='cool']

On Switching from HEX & RGB to HSL
▻https://sarasoueidan.com/blog/hex-rgb-to-hsl

When you define a #color in the #HSL format, you pick a color in the form of an angle between 0 and 360. Setting the saturation to 100% and the lightness to 50% you get the purest form of that color. Tweaking the color from there on becomes very intuitive.

Using the color wheel to pick colors has many benefits. One of the main advantages of HSL is that creating color harmonies becomes a piece of cake.

Complementary colors are located across from one another on the wheel. So if you start with a color and you want to get its complimentary one, all you need to do in #CSS is to add 180° to the value of the Hue.

https://d33wubrfki0l68.cloudfront.net/4cbdc92627b6171a802d851a725c4f597e1cac8d/f51ca/images/color-harmonies-2.png

There are many color harmonies (or schemes) as the image above shows. Similar to what we did above with the complimentary scheme, triadic color schemes can be created by adding (or subtracting) 120°. You can also create analogous color combinations with 30° separating the hues. You can also create monochromatic harmonies easily, with one main hue and then tweaking the lightness to get different tints and shades of that hue. The sky is the limit.

The CSS Cascade
Or, How browsers resolve competing #CSS styles

We style our websites using CSS, which stands for Cascading Style Sheets.
But what does Cascading really mean?

▻https://wattenberger.com/blog/css-cascade

https://pbs.twimg.com/tweet_video_thumb/EOzouwSWkAAiVlt.jpg

#webdesign

How To Write Mobile-first CSS | Zell Liew
▻https://zellwk.com/blog/how-to-write-mobile-first-css

Présentation avec exemples des règles de la construction « mobile-first » des feuilles de style CSS.

#mobile-first #css

Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web

#srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS

ITCSS: Scalable and Maintainable #CSS Architecture - Xfive
▻https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture

https://www.xfive.co/wp-content/uploads/2016/02/itcss2.jpg

ITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such a way that you can better deal with (not always easy-to-deal with) CSS specifics like global namespace, cascade and selectors specificity.

ITCSS can be used with preprocessors or without them and is compatible with CSS methodologies like BEM, SMACSS or OOCSS.

One of the key principles of ITCSS is that it separates your CSS codebase to several sections (called layers), which take the form of the inverted triangle

#webdesign

In Defense of Utility-First #CSS | frontstuff
▻https://frontstuff.io/in-defense-of-utility-first-css

From a file size standpoint, you shouldn’t worry about repeated class names in the HTML. That’s what Gzip is for. The deflate algorithm was specifically made to handle duplicate strings, so there’s no point in trimming away characters in your HTML. The resulting file size will make little to no difference whether you use a few or a lot of classes.

On the other hand, the more a selector is repeated in a stylesheet, the more work your browser has to do to resolve all styles.

HTML “bloat” doesn’t matter, but CSS does. The network and engine don’t care how many classes you have in your HTML, but the way you write your CSS counts.

Bonnes pratiques en CSS : BEM et OOCSS - Alsacreations
▻https://www.alsacreations.com/article/lire/1641-Bonnes-pratiques-en-CSS--BEM-et-OOCSS.html

Présentation de la méthode BEM pour le nommage et l’organisation des CSS.

La convention de nommage « officielle » BEM : ▻https://en.bem.info/methodology/naming-convention

Compléments à la méthode BEM : BEMIT : ▻https://www.bearstudio.fr/blog/bemit

#BEM #BEMIT #SPIP #CSS #nommage #méthode

Tufte CSS
https://edwardtufte.github.io/tufte-css

Tufte #CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.

If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.

Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

#webdesign #typographie

Top 10 most deadly CSS mistakes made by new and experienced developers - Painless CSS
▻https://www.painlesscss.com/top-10-css-mistakes.html

#css #erreur #bonnes_pratiques

Can I email… Support tables for #HTML and #CSS in #emails
▻https://www.caniemail.com

https://www.caniemail.com/assets/images/og.png

A site that offers support info on more than 50 HTML and CSS features tested across 25 email clients.

Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
▻https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

#CSS #grid #flexbox #layout

The “One HTML Page Challenge”, a great example of view-source culture / Boing Boing
►https://boingboing.net/2019/08/23/the-one-html-page-challenge.html

When I was interviewing developers for my latest book Coders, all the ones who grew up during the late 90s and early 00s web talked about how powerful view-source was in teaching themselves to code and make stuff online.

But web development these days has grown byzantine in its complexity; if newbie is trying to learn, view-source is liable to just cough up a slurry of incomprehensible, minified javascript. It closes off the easy onramps that existed back in the earlier days of the web.

So, projects like this one-page challenge are awesome, because the whole goal is to encourage the writing of web-site code that’s more legible and tractable.

#programmation #développement #HTML #Javascript #CSS #éducation

« How to create an image gallery with CSS Grid » by Abhishek Jakhar, 27.12.2018 ▻https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c #css #grid #webcomponents #gallery

Jules Forrest on CodePen
▻https://codepen.io/julesforrest

https://s.cdpn.io/profiles/user/244137/512.jpg?1

Tiens, une configuration en #CSS pour fabriquer directement du scroll doux (« smooth scroll ») :

Inconvénient, Safari ne le prend pas en compte (mais ça se dégrade très bien, puisque le scroll sera effectif, simplement il ne sera pas « progressif »).

Avantage, on peut le désactiver facilement avec une media query pour les gens qui ont le mal de mer :

twolfson/gulp.spritesmith : Convert a set of images into a spritesheet and CSS variables via gulp
▻https://github.com/twolfson/gulp.spritesmith

Module Gulp générateur de sprites pour des images bitmaps (png/jpg).
Crée le fichier de sprite + le fichier css avec les classes qui vont bien.

Installation basique :

#sprite #gulp #css

Using SVG | CSS-Tricks
▻https://css-tricks.com/using-svg

Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web

#SVG #CSS #web_dev

CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
▻https://tobiasahlin.com/blog/masonry-with-css

Méthode « tout CSS » pour faire un layout masonry : à base de flexbox, :nth-child() et order
difficulté possible : semble nécessiter de fixer la hauteur de l’ensemble...

Voir aussi : 10 exemples de layout « types » en flebox : ▻https://tobiasahlin.com/blog/common-flexbox-patterns

#css #masonry #layout

Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
▻https://frontendmasters.com/books/front-end-handbook/2019

58 bytes of css to look great nearly everywhere (▻https://jrl.ninja...
▻https://diasp.eu/p/8846653

58 bytes of css to look great nearly everywhere | #css #KISS

Overview of how does #css works behind the scenes?
▻https://hackernoon.com/overview-of-how-does-css-works-behind-the-scenes-498d98b0e404?source=rss

https://cdn-images-1.medium.com/max/960/1*wpvwCo9GaT9MqVIjfoPYSA.jpeg

FrontamentalsLet’s start by understanding what actually happens to our CSS code when we load up a web page in a browser.When a browser starts to load the initial #html file, it takes the loaded HTML code and parses it, which means that it will decode the code line by line. By this process, the browser builds the so-called DOM (Document Object Modal) which describes the entire web document in a tree with parent, children and sibling elements.HTML ParsingAs the browser parses the HTML, it also finds the stylesheets included in the HTML head and just like HTML, CSS is also parsed.But the parsing of CSS bit more complex.There are two main steps that are performed during the CSS parsing phase :1. Conflicting CSS declarations are resolved (also known a cascading)2. Process final CSS values (for (...)

#front-end-development #web-development

Va falloir jouer avec cette nouvelle #media_query : prefers-color-scheme - #CSS
▻https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme

La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l’utilisateur quant au thème à utiliser (sombre ou clair).

Si je comprends bien, ça vient d’être intégré dans Safari de MacOS 10.4.4, pas encore testé. Il va falloir tester si c’est pris en compte dans les webviews des apps iOS, là où ça me semble le plus directement utile.

Hacking Custom Checkboxes And Radios
▻https://hackernoon.com/hacking-custom-checkboxes-and-radios-5d48230440d?source=rss----3a8144eab

https://cdn-images-1.medium.com/max/1024/1*cTzsWgsSGnHrA5Vocmlr1A.jpeg

Cosmetic improvements to checkboxes and radios using CSSRadios (or radio buttons) and checkboxes are very important input elements commonly found in so many forms on the web.Checkboxes are used where multiple values from a list of predefined values may apply — for example, marking multiple files for deletion from a list of files.Radio buttons on the other hand are used where only one value is applicable — for example, selecting gender from a list.In this tutorial, we’ll examine using a step-by-step approach, how to improve the aesthetics and appearance of radios and checkboxes using #css while still preserving the accessibility of the input elements.In order to fully appreciate this tutorial, a basic understanding of CSS — selectors and style rules is required. However, you don’t really have to be (...)

#software-development #web-development #front-end-development #hackernoon-top-story

Why can’t I set the font size of a visited link?

Notice that the visited link appears gray, as expected, but the font size hasn’t changed! This is because changing the font size would be a security vulnerability! If CSS could set the font size differently, I (Jim) could tell whether you’ve visited pornhub.com. But how?

▻https://jameshfisher.com/2019/03/08/why-cant-i-set-the-font-size-of-a-visited-link

#security #css