Search results

McK @mck@hackers.pub
Public

https://sass-lang.com/documentation/breaking-changes/if-function/

In 2010, shortly after adding the boolean value type, Sass added the global if() function as a way to easily use booleans in a single expression without having to write out an entire @if rule. This function had the signature if($condition, $if-true, $if-false) and returned $if-true if $condition was truthy and $if-false otherwise.

At the time, browsers didn’t even support @media queries and we never imagined that CSS might support its own if() function someday. But fifteen years later, support for the CSS if() function began landing in browsers and we had to do so as well in order to remain fully CSS-compatible.

요약하자면, "우리가 if()함수를 전역으로 넣을 때까지만 해도 CSS에 if 함수가 도입될거라곤 상상도 못했어"

대안으로 제시하는 문법은 아직 사용하지 못하는 곳이 있을테니 당분간 @if and @else 규칙 쓰는게 나을듯.

Sass: Breaking Change: Plain-CSS if()

Syntactically Awesome Style Sheets

sass-lang.com

0
0
0
marius @mariusor@metalhead.club
Public

Today was the first time in my career I've actually used the <ruby> tag.

Granted I'm not using it exactly what it was designed for, but it's a decent compromise in having a fat icon accompanied by a small explanatory text, as opposed to doing this with a lot more CSS and some other semantically uninteresting containers.

A detail from a screenshot of a web page focusing on a link element meant to be repositioning the viewport at the top of the page. The link text is composed of an arrow pointing up, with a smaller text underneath that says "top" in small caps, and having the link title being shown as a tooltip: "Go to the top".
0
0
0
Roni Laukkarinen @rolle@mementomori.social
Public

Mastodon Bird UI support for Mastodon v4.6.0 with CSS properties is coming soon. The theme will also be modularized using SCSS partials to match Mastodon's new style infrastructure.

The build process will include npm scripts and Parcel, making the theme ultra-portable for any Mastodon instance, whether added through the Custom CSS textarea or directly by a Mastodon admin.

I'll also create a simple bash script for Mastodon admins to enable the theme as a selectable option more easily than the current fork-and-cut method.

This is no easy feat, but definitely worth it.

GitHub: github.com/ronilaukkarinen/mas

Progress in the nightly branch.

Screenshot of Mastodon v4.6.0-alpha.1 + Mastodon Bird UI 4.0.0rc
0
0
0
0
0
0
0
0
0
0
0
0
Peter Janes @me@mastodon.peterjanes.ca
Public

In the last ~6 months someone linked to their blog about using JS-free custom elements for page structure and style in place of a methodology like BEM, e.g. using `<my-element>`/`my-element {}` instead of `<div class="my-element">`/`.my-element {}`. Might have referenced [HUG CSS](gomakethings.com/hug-css-how-i) as well. I'm sure I bookmarked it but I'll be darned if I can find it again. Pointers please?

[update: found it, or close enough. mastodon.peterjanes.ca/@me/115]

Logo

HUG CSS, how I approach CSS architecture

Yesterday, I wrote about classless vs. class-based CSS design systems. In the article, I noted… There’s a middle ground between classless and class-based design systems. My favorite CSS boilerplates/frameworks/whatever include base styles for various HTML elements, some component styles for commonly used components (like nav menus and things), and some utility classes for nudging and tweaking the UI. I don’t know if you’d call them classless+ or Class-based-lite or what, but they sit somewhere in the middle.

gomakethings.com

Link author: Chris Ferdinandi ⚓️@cferdinandi@mastodon.social

0
0
0
0
0
0
0
0
0
0
0
1
GENKI @nibushibu@vivaldi.net
Public

長いこと :vivaldi_red: デスクトップでは

* 下部のステータスバーにアドレスバーの機能をマージ
* アドレスバーは下部に配置&基本非表示（メールの時だけ表示される）

という設定にしてたけど、
タブバーもアドレスバーも上部にない状態だと、

* デフォルトでは デフォルトのウインドウに表示されるタイトルバーが表示されてしまう
* それを で隠したとしても左上の信号ボタン 🔴🟡🟢 だけは消せない

という状態になっちゃうので、

* 左サイドに置いたタブバーの上部に 🔴🟡🟢 を表示するためのスペースを空ける
* 左サイドにタブバーがない時（自分はタブバーをけっこうな頻度で隠す）は Web ページ領域に 🔴🟡🟢 が重なることを許容する

と言う工夫・妥協が必要だったので、思いきって逆にステータスバーを非表示にして、上部に表示したアドレスバーにステータスバーの機能もマージする、という感じにしてみた。

こうすることで

* 基本的にはアドレスバーは非表示にすることはないので 🔴🟡🟢 がWeb ページとかに重なることが少なくなる

ので、不自然な見え方になるケースが減るのではないかという仮説を検証していく生活にこれから入っていく。

macOS の Vivaldi のウインドウのキャプチャ画像。 上にアドレスバー、左にタブバー、右にサイドバーが表示されていて、下部にはステータスバーはなく、通常ステータスバーに表示されているいくつかのボタン類は上部のアドレスバーに配置されている。
0
0
0
0
0
0
0
0
0
0
0
0
Hacker News 50 @hn50@social.lansky.name
Public

It is ok to say "CSS variables" instead of "custom properties"

Link: blog.kizu.dev/css-variables/
Discussion: news.ycombinator.com/item?id=4

It is OK to Say “CSS Variables” Instead of (or Alongside) “Custom Properties”

TPAC 2025 just ended, and I am positively tired. Attending it remotely, my sleep schedule is chaotic right now. I have many ideas for CSS-related posts in my list of ideas for November, but almost all of them require at least some amount of research and crafting demos. Well! I found one note that I wanted to expand on, and which sounds tiny enough to be able to finish it in my altered state.

blog.kizu.dev

Link author: Roma Komarov@kizu@front-end.social

0
0
0
0
0
0
Alvaro Montoro @alvaromontoro@front-end.social
Public

An article about triangles and CSS. I have always said that using borders to draw triangles with CSS is a hacky solution and shouldn't be used... but there are exceptions.
alvaromontoro.com/blog/68086/d

Spoiler alert: they involve logical properties... and most places that suggest using borders still use physical properties instead.

Drawing Triangles with CSS Using Borders... an Exception

A long time ago, I wrote an article about drawing triangles in CSS, and explained why the common border-based approach was far from ideal and should generally be avoided. In this article, I revisit a scenario where using borders might actually be convenient. :: Blog post at Alvaro Montoro's Personal Website.

alvaromontoro.com

0
0
0
0
0
0
Ana Tudor 🐯 @anatudor@mastodon.social
Public

Today in thieves, cheats and grifters on the internet.

So Talent500, who have a gold check account on twitter (which as far as I know, costs a shit ton of money, $1000 is way more than I make in a GOOD month) copied a few bits of my article that I worked for three weeks on.

Could not even be bothered to copy enough to get to a working solution, stopped at intermediary steps. And "forgot" to give credit. And somehow come first in search results.

My original article, dated March 18, 2025.The piss poor copy from Talent 500, dated March 24, 2025, 6 days after mine.Yet somehow Talent 500 ranks higher in search results than Frontend Masters.
0
0
0
0
0
0
0
0
0
GENKI @nibushibu@vivaldi.net
Public

@elk が今年の1月のリリースを最後に更新が止まっていて、もうメンテナンスされていないんじゃないかという噂が。
シンプルで可愛いデザインで一時期使っていたので残念＆心配ではあるけど、 :mastodon: のデフォルトの Web UI も大分デザインがこなれてきたし、 とか みたいな :mastodon: のカスタム も出てきたので、相対的に の存在意義みたいなものが薄れてしまっていた状況というのはあったような気はする。

のように、機能面でデフォルトの :mastodon: の Web UI を超えるいろんな機能（外部サーバーからの見た目を一時的にエミュレートできたり、CatchUP 器用や、独自の投稿ドラフトの自動保存機能とか、複数アカウント切り換え機能とか）があれば差別化できたんだろうけど、その点 はそこまで通常の :mastodon: Web UI と比較してリッチな機能が追加されてるわけじゃないからな…
いっそのこと、 :mastodon: のカスタム CSS テーマとしてリブートするみたいなほうがメンテナンスコストは小さくなりそう :tony_astonished:

0
0
0
0
0
0
Keith J Grant @keithjgrant@front-end.social
Public

😅 So I did not fully appreciate the power of hashtags on this place when I wrote my , so I'm giving it a second go.

• I'm a front-end web developer in Spokane, WA. I work for Red Hat on Ansible Controller using , , . I don't write so much here as I have at previous gigs, but, I'm okay at that too…

• I'm the author of CSS in Depth 📘 manning.com/books/css-in-depth

• I enjoy mixing and have my recipes available in a : sidecar.us

The cover for CSS in Depth

CSS in Depth - Keith J. Grant

Master advanced CSS techniques and best practices to create stunning, modern web designs.

www.manning.com · Manning Publications

0
0
0
0
0
0
0
0
0
nulta @nulta@silicon.moe
Public

┏━━━┓╭━╮
┃ｃｓｓ┃┃그┃
┃는어렵지않아요┃　것
┗━━━┛┃이┃
　　　　　┃ｃ　ｓ　ｓ
　　　　　┃니┃
　　　　　┃까┃
　　　　　╰━╯<div class="clearfix"></div>

1
0
0
Roma Komarov @kizu@front-end.social
Public

New blog post: “Named Container Presence Check”

blog.kizu.dev/named-container-

I was doing some recently, and I wanted to know if my element was inside a certain container.

While I could reuse the same selector that I used to apply the container with, this did not feel right: what if I were to apply the same container via a different selector? Or have a version of that element where the container is removed via some modifier?

Can we somehow use just the container’s name for this?

Named Container Presence Check

I was doing some styling recently, and I wanted to know if my element is inside a certain container. While I could reuse the same selector that I used to apply the container with, this did not feel right: what if I would apply the same container via a different selector? Or have a version of that element where the container is removed via some modifier? Can we somehow use just the container’s name for this?

blog.kizu.dev

Link author: Roma Komarov@kizu@front-end.social

0
0
0
0
0
0
0
0
0
Roni Laukkarinen @rolle@mementomori.social
Public

Mastodon Bird UI v3.0.0 is now released! 🎉

Most notable changes:
- Support for Mastodon stable 4.5.0
- Fix profile links and alignment
- Re-style Quote Posts
- Improved UI for the new quote posts popper
- Improve status__quote--error being to high, update min-height
- Remove the separator dot redundant since 4.3
- Fix performance-expensive transitions
- Fix audio embed overflow
- Improve the accesibility of modals

Full changelog and download: github.com/ronilaukkarinen/mas

Mastodon Bird UI phone mockup, closeup of an iPhone, text: "Mastodon Bird UI 3.0.0"
0
0
2
0
0
0