I know I've said this before, but I really hate CSS Modules.
Seriously, can it please go die in a fire?
I know I've said this before, but I really hate CSS Modules.
Seriously, can it please go die in a fire?
Decoding #CSS Selectors: `:has(:not)` vs `:not(:has)` - "When you combine CSS Functions, the nesting matters. In this post, we'll look at the difference between `:has(:not)` and `:not(:has)`, and how to approach decoding CSS selectors that use these nested CSS functions." https://polypane.app/blog/decoding-css-selectors-has-not-vs-not-has/
"There are countless ways to share browser-based mockups. Upload the files to a web server. Use a service like CodePen, Glitch or Neocities... Drag a folder to a 3½-inch floppy disk, hide the disk in a hollowed-out book, leave the book at an agreed upon location."
My favorite bit from:
https://cloudfour.com/thinks/why-i-like-designing-in-the-browser/
`position-area` is my favorite part of #CSS anchor positioning. It bakes in some really smart defaults that go deeper than you might expect.
#Movim
Movim est une plateforme de blogging et de messagerie décentralisée construite sur le protocole XMPP, un standard de communication ouvert et largement utilisé. Voici un billet détaillant ses principales caractéristiques et fonctionnalités
Neato borders that overlap each other: https://codepen.io/marcamos/pen/dPypZGK?editors=1100
#css
I’ve been designing web experiences for 20+ years. While I use and enjoy dedicated design software, I’m pretty sure I design “in the browser” more than most.
Here are just a few reasons why… https://cloudfour.com/thinks/why-i-like-designing-in-the-browser/
Sometimes I feel like I get CSS.
Then there are times I don't.
This afternoon, CSS went well.
Well, fingers crossed...
Open the conversation about:
Since both are valid, and maintained in the W3C rec, we must assume neither is recommended over the other in every use case instance scenario sitch'
#CSS #WebDesign #WebDevelopment #crossplatform #deviceneutrality
So... that said...
Which method is "better"?
They both seem to serve the same functional purpose, in the end.
my intended use is primarly and likely only to appear in a .css doc via <link rel="stylesheet">
**For the sake of conversation:**
Why do we have the ability to be more granular about the identity of the source?
See above "@ import" vs "@ font-face"
Also, for the sake of ... the same conversation, really:
[I personally am confident that #WebDeveloper extension exists only after extensive, and continued research]. I feel I could resolve that-- even If i don't know the technical logic leading to one or ther other-- @chrispederick 's extension, having shown the @-import rendered URL in this-- my most likely to be used enviroment-- it is safe for me to say, i can always trust that at-import is satisfactory, while the more granular aproach of @-font-face seems perhaps overkill for this purpose?
Curious observation while pruning some CSS using one of my favorite development tools, "Web Developer" by @chrispederick
#WebDevelopment #CSS #directives #import #fontface #webdeveloper #browserextension
Wrapping up a project for a "release" on github, I use Google Material Icons for guess what... icons! Optional methods exist to "import" the font data required for rendering the Google font in one's own creation.
Typically, telling the browser which font to use is achieved via HTML <Style> or <Link> to rel="stylesheet". The at-import points to the resource URL (as contains the desired font data). The "@ font-face" directive also contains a parameter for the same type of font resource URL.
Attached Screenshots:
showing interface where available CSS resources are shown "collapsed/ expanded" to demonstrate that "Web Developer" (the browser extension) identifies the URL pointing to the google resource under the at-import directive, but not the at-font-face which appears in the same, local .css file.
What do we make of this phenomenon?
Here is the interactive demo illustrating this on @codepen
https://codepen.io/thebabydino/full/OJqZvQO
Want inline semitransparent text background with no overlap?
Here's how on @codepen
https://codepen.io/thebabydino/pen/gbOwxGL?editors=1100
(you can see the overlap problem and the desired result below)
The `filter` combines 2 `feColorMatrix` techniques:
#Tailwind v4 removing the ability to disable core plugins is quite a subtly hostile change. It was previously possible to use the utilities in an opt-in fashion to strictly control the output and prevent clashes with existing #CSS but now it's all or nothing.
https://tailwindcss.com/docs/upgrade-guide#disabling-core-plugins
Here is a CodePen which shows a responsive TAB design pattern made with <details> elements (and tailwind):
Вы не знаете CSS. Мои вопросы о CSS с ответами
Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем я возвращаюсь к формату статей в виде вопрос-ответ. Вопросы будут те, которые я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?». При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем я хочу вас завалить, чтобы казаться супер умным! (здесь ирония). Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать. Так, вы готовы? Давайте посмотрим, что я вам подготовил.
Fixed a stupid mistake in the latest Mastodon Bird UI nightly...
https://github.com/ronilaukkarinen/mastodon-bird-ui/tree/nightly
Someone asked how to get such an offset grid for any number of items, so here's my take on it https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/ - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.
With #AI I was able to build a full #React app that generates a list of every Gossip Girl episode from S1 by querying OMDB in about 30 minutes
I can see why people think this is a job killer. This is stuff that would have taken foooorever to do before AI. I basically never bothered doing any #CSS or front end formatting before AI because it was so cumbersome, and here it just automatically did it. I can't take credit for anything other than just typing in "make everything pink and purple"
Every two weeks I proctor a Zoom where we look at #CSS and #HTML and solve #FrontEnd problems as best we can. We call it Front End Study Hall on the #IndieWeb next one? Tomorrow! Join us! https://events.indieweb.org/2025/02/front-end-study-hall-022-Ml4JWHiZeiVt