Issue 02: Redesign, :has(), Safari 18, button, display contents
Hello everyone,
After two months of work, I finally hit the release button for my new blog design. I introduced new pages and content that reflect my current work, including but not limited to:
- About page
- Speaking
- Services & work
Recent articles
Display Contents in CSS
I wrote a new interactive article that is all about using display: contents. If you want to expand your CSS layout skills, learning about this CSS value will make your life easier.
Articles that I like
The Undeniable Utility Of CSS :has
Josh W Comeau wrote a great article about CSS :has. What I like the most is that the examples are real-life problems that he solved while working on his new website design.
One of my favorite use cases is disabling scroll when a modal/dialog opens.
html:has([data-disable-document-scroll="true"]) {
overflow: hidden;
}
WebKit Features in Safari 18.0
I'm a big fan of how the webkit team publishes new browser updates. They are clear, easy to read, and very well-documented.
I particularly liked that View Transitions and CSS Style Queries are now supported in Safari 18.0. Fun times!
How I build a button component
A modern, fresh look at how to build a button component. Andy Bell from Piccalilli goes into all the details they consider while creating a button.
One thing that I wasn't aware of is that we can't use CSS variables for the border property. That means this won't work:
/* This won't work. */
.button {
border: var(--button-border-width) var(--button-
border-style) var(--button-border-color)
}
/* This works */
.button {
border-width: var(--button-border-width);
border-style: var(--button-border-style);
border-color: var(--button-border-color);
}
Speaking at NL Design Systems Week
I was invited to speak at the virtual event "Design Systems Week" happening on 14-17 October this year. I will speak about "RTL Styling and CSS".
That's it for this newsletter issue.
See you soon, take care.