explore | Grilled Cheese

Tailwindデザインシステム向けのLintツール。
ESLint/Oxlint向けに提供され、Tailwind v4プロジェクトで利用できる。
`no-restyle`/`no-raw-colors`/`no-arbitrary-values`など… "shadcn-ui/lint: An agent-first linter for Tailwind design systems. Write design system rules that agents can verify." https://github.com/shadcn-ui/lint #css #ESLint #Tools

【Tips】
CSSの:has()を使うと、一覧の中の1枚だけがホバーされている状態を、CSSだけで判定できます💁‍♂️

```
.card-list:has(.card:hover) .card:not(:hover) {
opacity: 0.5;
}
```

「ホバーされている.cardを持つ.card-list」を:has()で捉え、:not(:hover)でホバーされていないカードだけを暗くする書き方です。

#codegrid #css

@ivorjetski.bsky.social I have another Idea think Metro map with animated routes with animated "trains"

This will probably be tomorrow.

#ledart #css

Built a responsive pricing card layout with Flexbox today 🚀

Practiced `flex`, `gap`, `flex-direction`, responsive design, and hover effects.

Slowly getting better at turning concepts into real projects. 💻🔥

#100DaysOfCode #WebDevelopment #CSS #Flexbox

Love it! 🤩 📦 How far can we take the #CSS #ledart challenge?

One more for the #ledart #css @ivorjetski.bsky.social LED Art Challenge!

codepen.io/editor/Sensi...

🏆 September 14th CSS-Dodos Top 5

1 Syntax Runner 105 - 2/5, Fairman
2 henrik_elias - 3/6, clean
3 cheddy - 3/5, Fairman
4 Flex Shuffler 589 - X/5
5 Selector Pilot 130 - X/5

css-questions.com/css-dodos

#css #cssdodos #cssquestions

🦖 Creating vertical form controls 🦖

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Writing_modes/Vertical_controls

The guide explains how to use the CSS writing-mode and direction properties to create and configure vertical form controls. This includes:

#webdev #CSS

New comic: If web development was like going to a restaurant (I)
comicss.art/comics/256/

Comic coded in CSS using Web Components.

#css #html #cartoon #comic #webdev

This is where modern #CSS really shines: anchor positioning, animating and dynamic colors with `oklch` + `color-mix`. All positioning and coloring is based on a single custom property.
I'm having sooo much fun with this 😍🤩

Little #CSS custom properties typo today.

Expecting var() support multiple values.

margin:block: var(--value-1 --value-2) 🤷

Safari 27 will be out later on today.

Worth reading the release notes if you have the time.

I'm quite excited for:
#css
- stretch keyword without vendor prefix
- :heading pseudo-class

#html
- customizable <select> element
- auto keyword in the sizes attribute on <img> elements

:has()で不要になったJavaScript 10選

#CSS #JavaScript