🔗 “Cropping Images with CSS While Keeping a Focal Point in the Center” by @johannes

#image #WebPerf #CSS #ContainerQueries

⚓️ https://nicolas-hoizey.com/links/2023/06/22/cropping-images-with-css-while-keeping-a-focal-point-in-the-center/

🔗 “Cropping Images with CSS While Keeping a Focal Point in the Center” by @johannes

#image #WebPerf #CSS #ContainerQueries

⚓️ https://nicolas-hoizey.com/links/2023/06/22/cropping-images-with-css-while-keeping-a-focal-point-in-the-center/

First time playing around with #ContainerQueries, and wow being able to set font size proportionally to card size with a couple lines of CSS is 🤯

This example is from my portfolio site I'm redesigning:

```css
.card {
container-type: inline-size;
}

@container (min-width: 500px) {
.card .title {
font-size: 8cqmin;
}
}
```

First time playing around with #ContainerQueries, and wow being able to set font size proportionally to card size with a couple lines of CSS is 🤯

This example is from my portfolio site I'm redesigning, which has a grid of project cards in varying sizes:

```css
.card {
container-type: inline-size;
}

@container (min-width: 500px) {
.card .title {
font-size: 8cqmin;
}
}
```

#css #containerqueries @jensimmons @LeaVerou
There is no this/self using #containerqueries? What a pity. @bramus
.mycontainer { container-name: mycontainer);
@container mycontainer (min-width: 700px) {
$self / $this {
padding:60px
}
}

⚪️ On Container Queries, Responsive Images, and JPEG-XL
by Jason Grigsby @grigs @grigs at @CloudFour
#containerqueries #images #webdev #responsive

https://cloudfour.com/thinks/on-container-queries-responsive-images-and-jpeg-xl/

@nicod totalement ! Je te conseille fortement de consulter la démo de @Una
https://codepen.io/una/pen/mdOgyVL . Sur des interfaces à base de cartes ça fonctionne particulièrement bien. Très efficace pour écrire un seul composant qui s'adapte en fonction de son contenu.
#ContainerQueries #DefensiveCSS #ResilientCSS #ResponsiveToTheContainer

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day3 : Effet de défausse et #ContainerQueries

Le projet est à retrouver sur : https://teotimepacreau.github.io/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode

Goals :
- enabling dynamic and adaptive styling with container queries
- border-radius container handle images thanks to "overflow: hidden"
- discarding effect with translateX + rotate + scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

Now i do #typo with #containerqueries .😀#css

@heydon How does the use of #ContainerQueries impact (or not) techniques from EveryLayout.dev?

#ContainerQueries landed in all major browsers: Safari 16, Firefox 110, Chrome 105!

https://ishadeed.com/article/container-queries-are-finally-here/

Mixing #ContainerQueries, #Typography, #Clamp and #ContainerQueriesUnits from @fonts → "Our text will never get too big or too small and if a dev throws that paragraph into a sidebar or a card or something then our text will always look good."

"what hundreds of lines of CSS hacks could be cut down to with container queries:
p {
font-size: clamp(1rem, 2.5cqw, 2rem);
line-height: clamp(1.35rem, 3.5cqw, 1.9rem);
}"

https://www.robinrendle.com/notes/container-queries-and-typography/

#CSS #DefensiveCSS #ResilientCSS

@keithjgrant #ContainerQueries https://ishadeed.com/article/container-queries-are-finally-here/

Firefox 110 will be released on February 14th, for all Container Queries lovers! 🥰

https://caniuse.com/css-container-queries

#ContainerQueries #CSS #Firefox

⚓️ https://nicolas-hoizey.com/notes/2023/02/05/1/

Firefox 110 will be released on February 14th, for all Container Queries lovers! 🥰

{% caniuse "css-container-queries" %}

#ContainerQueries #CSS #Firefox

⚓️ https://nicolas-hoizey.com/notes/2023/02/05/1/

Container Queries přicházejí - https://www.vzhurudolu.cz/prirucka/container-queries
#webdev #css #containerQueries

#css #containerqueries #customproperies #nesting.
All of these not make #CSS easier to read and understand. #CSS becomes much more specific and needs much more understanding. So nothing for sissies (correct englisch word?)

Container queries, people! Is THE SHIT! …but quite fiddly❤️🎉🥳

#css #containerQueries

◾️ A Few Times Container Size Queries Would Have Helped Me Out
by Dan Christofi on @css
#ContainerQueries #CSS #webdev

https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/

Last time we highlighted all the cool features enabled by #DesignToken ... this time we shine some light on #ContainerQueries. One of the most exciting new features of the #opensource release. There were a couple of articles lately, e.g. from @brad_frost or Dan Donald

https://www.kickstartds.com/blog/release-spotlight-container-queries/