hamatti, to CSS
@hamatti@mastodon.world avatar

If you're only gonna watch one thing this weekend, watch this amazing talk about the history of styling in the web and the guiding principles of how browsers work with regards to styling by @mia from last week's 11ty conference.

https://www.youtube.com/watch?v=uaN9kY8lKPU

stvfrnzl, to Blog
@stvfrnzl@mastodon.online avatar

Five years ago was my graduation from on this very day.

I looked back and wrote a GIANT post: https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/

Sit back, relax and enjoy the ride.

a11yclub, to CSS
@a11yclub@mastodon.social avatar

Just in: Alongside @karlgroves and @erikKroes, @5t3ph will also be offering a workshop in Amsterdam on 9 June:

Beyond : Requirements for Accessible Components

Participation in half-day workshops costs from € 25, full-day workshops from € 50. Further workshops can be added at any time. Get your tickets: https://ti.to/tollwerk/accessibility-club-summit-2024

More info: https://accessibility.club/event/accessibility-club-summit-2024#schedule-2024-06-09

5t3ph, to CSS
@5t3ph@front-end.social avatar

Soooo... who is attending Day, the Accessibility Club Summit, or both?

iamdtms, to CSS
@iamdtms@mas.to avatar
xeophin, to CSS
@xeophin@swiss.social avatar

Don't set fantasy weight values in your @font-face definitions. It will fuck up the fallback algorithms should your font lack some symbols.

Written from a company who's definition for the regular weight is set to 100

kizu, to Typography
@kizu@front-end.social avatar

We really need to gather various #typography related #CSS properties that are scattered across different browsers without full support (or with just partial support) and make it into an #interop2025 focus area.

Like ascent-override (please, Safari!)

Or font-size-adjust (come on, Chrome!)

Or… initial-letter (hey, Firefox!), though, there are also so many ::first-letter issues!

Or text-box-trim & text-box-edge (ok, these are only there in Safari TP)

And so on, and so forth.

virtulis, to CSS
@virtulis@loud.computer avatar

Just found a #CSS trick that's so simple and useful it should be common knowledge, and yet I can't find any mention of it.

Sometimes you would really prefer that, if a sentence doesn't fit on the current line, it would just go on the next line as a whole.

The usual hack for this is to put it in a span with white-space: nowrap. This is obviously a very bad idea, because it can and will break layouts.

A better option? display: inline-block. Yeah, that's literally the whole pro gamer move.

Each one of these sentences is an inline-block. It breaks inside when it doesn't fit, but goes on the next line when it does.

How the hell did I not know this.

mobileatom, to CSS
@mobileatom@flipboard.com avatar

CSS3? Pfff. Get ready for CSS6! #CSS

https://thathtml.blog/2024/05/get-ready-for-css-6/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

mobileatom, to CSS
@mobileatom@flipboard.com avatar
vanilla, to CSS
@vanilla@social.spicyweb.dev avatar

Finally. 😂

(We love ya 3, but it's high time we were talking about CSS4, CSS5, and beyond!)

https://thathtml.blog/2024/05/get-ready-for-css-6/

leaverou, to CSS
@leaverou@front-end.social avatar

🔥 New blog post!

“On compliance vs readability: Generating text colors with CSS”
https://lea.verou.me/blog/2024/contrast-color/

This has been in the making for over a month! 😮‍💨

It includes:
🔥 New #CSS Technique: How can we use widely supported CSS features to automatically pick a text color that is readable over an arbitrary background?
🔥 Original research: What lightness ranges correspond to what color contrast compliance & readability buckets? How are these affected by additional constraints (gamut, chroma, hue)?

mia, (edited ) to CSS
@mia@front-end.social avatar

We'll go live in an hour (1pm ET, 10am PT) to talk about surprising behavior when using #css container queries!

https://www.youtube.com/watch?v=Ci2DLDQYup0

moh_kohn, to CSS
@moh_kohn@mastodon.scot avatar

Can I detect clamp support using @supports?

lonekorean, to CSS
@lonekorean@front-end.social avatar

Are folks using things like margin-inline as shorthand for left/right and margin-block as shorthand for top/bottom?

Or do you avoid that because of writing-mode/direction/text-orientation?

Or are those not really a concern in your usage?

premartinpatrick, to Twitch French
@premartinpatrick@mastouille.fr avatar

On s'occupe de la partie serveur du site de loterie à partir de 10h30 sur ma chaîne . Codage en maintenant que la partie / et est bouclée.

RDV sur https://www.twitch.tv/patrickpremartin pour y assister.

Hier j'ai fait un peu de , ce ne fut pas si laborieux que ça. Voici comment seront choisis les numéros de ticket de loterie par les participants : https://youtu.be/vdTp7XzNmBE

Luke, (edited ) to random
@Luke@typo.social avatar

Anyone know of a code editing environment that live updates the preview based off of the you're currently typing? No 'save' action needed?

CSSEdit / Espresso is too old.
• Mac, please
• PHP pages

Luke,
@Luke@typo.social avatar

Live Preview of changes to my CSS while I write it, in a php localhost environment.

I still think there’s a solution out there.

scott, to CSS
@scott@typetura.social avatar

Sass mixin for seconds based keyframe animations: https://codepen.io/scottkellum/pen/KKLddVd

kerfuffle, to Java
@kerfuffle@mastodon.online avatar

Who here knows a CDN that offers edge computing capability for the JVM / GraalVM?

AWS Lambda@Edge only supports JavaScript and Python.
Cloudflare only supports JavaScript.
Fastly supports WebAssembly.

kerfuffle,
@kerfuffle@mastodon.online avatar

Actually, it may be soon that #WebAssembly with WASI support as offered by Fastly can be targeted from #Kotlin / #Java. Nice article on the development by @sdeleuze at https://seb.deleuze.fr/introducing-kotlin-wasm/

Would be sweet if I can have a static #HTML / #CSS website that uses #HTMX for interaction with a backend written in Kotlin and compiled to #wasm running on an edge location using #wasi .

joelanman, to CSS
@joelanman@hachyderm.io avatar

> The most obvious difference between anchor and absolute positioning is that you don’t have to nest your anchor target element into the child tree of the anchor element (i.e., the element with position:relative). On the contrary, you can place your anchor target element anywhere in the DOM.

https://blog.logrocket.com/use-css-anchor-positioning

mia, (edited ) to CSS
@mia@front-end.social avatar

Are there issues or surprises you've run into when using #CSS container queries in practice? Let us know, and we'll try to cover them in the @OddBird Winging It live stream tomorrow!

https://www.youtube.com/watch?v=Ci2DLDQYup0

simevidas,
@simevidas@mastodon.social avatar

@mia @OddBird

> Extremely annoying #CSS gotcha: container query units seem to be relative to the content-box dimensions. And there doesn't seem to be any way to make them relative to the border-box dimensions... which is what I need to solve other problems caused by container queries. 😭

https://twitter.com/anatudor/status/1789308238791422043

symfonystation, to Symfony
@symfonystation@newsletter.mobileatom.net avatar
Nico3333fr, to CSS French
@Nico3333fr@mastodon.social avatar

En fait, l'IA, c'est surtout un accélérateur à conneries.

Tu discutes #CSS sérieusement avec des gens respectables, et le soir tu poses des paroles débiles sur un rock généré et ça donne ça https://suno.com/song/38862858-9034-4781-9fc8-6f6394f25e46

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • kavyap
  • thenastyranch
  • mdbf
  • DreamBathrooms
  • InstantRegret
  • magazineikmin
  • Youngstown
  • GTA5RPClips
  • slotface
  • modclub
  • everett
  • Durango
  • rosin
  • cisconetworking
  • tacticalgear
  • khanakhh
  • vwfavf
  • ngwrru68w68
  • Leos
  • normalnudes
  • ethstaker
  • tester
  • cubers
  • osvaldo12
  • anitta
  • provamag3
  • JUstTest
  • All magazines