Ghazal
LightNews LightNews
ghazalp.bsky.social
Ghazal
@ghazalp.bsky.social
13 followers 7 following 66 posts
I danced with mambo before meeting its offspring, joomla.
Since then, I always tried to dress it with the best CSS costume.
Also, a Twitter exile, like most of us here.
Posts Replies Media Videos
Reposted by Ghazal
elfsternberg.bsky.social
"The `from` keyword allows your design system to use any multiple colorspaces while preserving consistency."

That's foolish. If your design system don't specify a required colorspace, you're encouraging inconsistency!

javascript.plainenglish.io/the-tiny-css...
The Tiny CSS Upgrade That Solves Big Design System Headaches
Tired of updating 180 color variables? Discover the new CSS feature that makes your entire theme adapt automatically.
javascript.plainenglish.io
November 15, 2025 at 7:57 PM
Reposted by Ghazal
charans.bsky.social
Pure #CSS back-to-top button with progress indicator
@codepen.io: codepen.io/scharan/full...
Pure CSS Back-to-Top Button With Progress Indicator
A button that lets users smoothly scroll back to the top of the page and displays a visual progress indicator of how much content has been scrolled. Ma...
codepen.io
November 14, 2025 at 5:21 PM
Reposted by Ghazal
joshwcomeau.com
I just updated my interactive blog post on CSS Grid! It now includes explanations for the `span` keyword, as well as a brief look at `grid-auto-flow`:
An Interactive Guide to CSS Grid • Josh W. Comeau
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Gri...
www.joshwcomeau.com
November 14, 2025 at 6:33 PM
Reposted by Ghazal
cssbasics.fridayfrontend.com
Getting Creative With Small Screens: "On mobile, people can lose their sense of context and can’t easily tell where a section begins or ends. Good small-screen design can help orient them using a variety of techniques." #CSS css-tricks.com/getting-crea...
Getting Creative With Small Screens | CSS-Tricks
On mobile, people can lose their sense of context and can’t easily tell where a section begins or ends. Good small-screen design can help orient them using a variety of techniques.
css-tricks.com
November 14, 2025 at 8:07 PM
Reposted by Ghazal
random-mdn.bsky.social
🦖 Random MDN: Pseudo-classes 🦖

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that lets you style a specific state of the selected element(s). For example, the pseudo-class :hover can be used t…

#webdev #CSS
Pseudo-classes
A CSS pseudo-class is a keyword added to a selector that lets you style a specific state of the selected element(s). For example, the pseudo-class :hover can be used t…
developer.mozilla.org
November 15, 2025 at 1:41 AM
Reposted by Ghazal
jceeditor.bsky.social
⭐ JCE Pro 2.9.96 released!

Maintenance update with fixes across Link, Media Fields, Joomla 6 Preview + more.
Works with Joomla 3–6 — no BC plugin needed.

www.joomlacontenteditor.net/news/jce-pro...
#joomla #jce
November 13, 2025 at 11:39 AM
Reposted by Ghazal
u11g.com
Container queries, grid, and subgrid working together - this is modern CSS layout done right!

https://ishadeed.com/article/modern-css-section-layout
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
November 10, 2025 at 9:20 AM
Reposted by Ghazal
logrocket.bsky.social
What does `text-wrap` do, exactly? And does it live up to the hype?

In this article you’ll learn about the `text-wrap` CSS property, its different values, what they do, and their impact on UI design.

blog.logrocket.com/css-text-wra...
When to use CSS text-wrap: balance vs. text-wrap: pretty
Compare and contrast two CSS components, text-wrap: balance and text-wrap: pretty, and discuss their benefits for better UX.
blog.logrocket.com
November 8, 2025 at 12:06 AM
Reposted by Ghazal
atejin.bsky.social
ブラウザのサポート状況的に問題なさそうだし、そろそろコンテナクエリ触ってみようかな。

メディアクエリの限界を超える！CSS Container Queries完全ガイド｜saku zenn.dev/jabo_sack/ar... #zenn
メディアクエリの限界を超える！CSS Container Queries完全ガイド
zenn.dev
November 8, 2025 at 6:04 AM
Reposted by Ghazal
random-mdn.bsky.social
🦖 Random MDN: Styling columns 🦖

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns

As column boxes created inside multi-column (multicol) containers are anonymous boxes, styling individual columns is not possible, but we can style the gaps between …

#webdev #CSS
Styling columns
As column boxes created inside multi-column (multicol) containers are anonymous boxes, styling individual columns is not possible, but we can style the gaps between …
developer.mozilla.org
November 6, 2025 at 6:33 AM
ghazalp.bsky.social
CSS only. Really nice and clever.
Tabs display on desktop
Accordion on mobile view
And a funny comment in the JS file:
// Sorry we don't need 47 dependencies for tabs anymore.
// Just pure HTML and CSS living their best life. ✨

codepen.io/badger3000/p...
CSS Grid Tabs - Responsive Desktop/Mobile (2025)
Modern tab interface using native HTML <details> elements with CSS Grid & Subgrid - NO JavaScript required! ✨ Features: - Desktop: Horizontal tabs wi...
codepen.io
November 2, 2025 at 10:43 AM
Reposted by Ghazal
inautilo.bsky.social
#Development #Techniques
Simple full-bleed and breakout styles · Modern CSS solutions for a classic layout problem ilo.im/1682wb by Ana Tudor

_____
#ModernCSS #CssGrid #CssUnits #FullBleed #Layout #WebDev #Frontend #HTML #CSS
Super Simple Full-Bleed & Breakout Styles
Having a width-limited centered column of content is common and good, but what do you do when you need to break out? It's not hard these days, but it does depend on the situation.
ilo.im
November 1, 2025 at 6:37 AM
Reposted by Ghazal
kalvn.net
L'utilisation des *view transitions* CSS n'est pas exactement triviale pour le moment, mais cet article en détricote quelques détails.

🔗 https://piccalil.li/blog/start-implementing-view-transitions-on-your-websites-today/

#CSS #transition
Start implementing view transitions on your websites today
Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.
piccalil.li
October 30, 2025 at 8:00 AM
Reposted by Ghazal
nileshprajapati.com
Detect fallback positions with #CSS anchored container queries from Chrome 143
Detect fallback positions with anchored container queries from Chrome 143  |  Blog  |  Chrome for Developers
Detect fallback positions with anchored container queries from Chrome 143
developer.chrome.com
October 30, 2025 at 8:20 AM
Reposted by Ghazal
ishadeed.com
✍️ Solved by Modern CSS: Section Layout

A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!

ishadeed.com/article/mode...
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
October 23, 2025 at 7:20 PM
Reposted by Ghazal
kunena.bsky.social
We have released the second beta version for the K7.0.x branch. This version works natively on Joomla! 6.0 without the compat plugin : www.kunena.org/forum/76-Off....

#joomla
Official Announcements and News about Kunena
We encourage [b]everyone[/b] to subscribe to this category to receive important news about new releases, etc. by email.
www.kunena.org
October 21, 2025 at 7:20 PM
Reposted by Ghazal
ishadeed.com
I needed a quick way to generate conditional CSS with :has() and quantity queries, and this tool by @css-only.dev is so helpful.

css-tip.com/quantity-que...
A screenshot from the tool titled "Quantity queries using has() selector" showing an input field with ".container" value, and a select menu with options like "Exactly, At Least, At most, etc" items.
October 21, 2025 at 5:40 AM
Reposted by Ghazal
joomla.org
Joomla Magazine - The October Issue
Check out all the great articles in this months magazine!
#Joomla #CMS #Magazine #OpenSource
https://ow.ly/9k5S50Xfkie
October 21, 2025 at 10:45 AM
Reposted by Ghazal
guillaume.akryum.dev
Noticed that CSS Anchor Positioning is in Firefox nightly 🔥
October 20, 2025 at 6:51 AM
Reposted by Ghazal
css-only.dev
💡 CSS Tip!

In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀

No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.

css-tip.com/position-area/
October 16, 2025 at 10:07 AM
ghazalp.bsky.social
#Firefox144 #CSS
New in FF144 - 2
::view-transition-group() pseudo-element
::view-transition-image-pair() pseudo-element
::view-transition-new() pseudo-element
::view-transition-old() pseudo-element

YES!!!!
October 15, 2025 at 8:56 AM
ghazalp.bsky.social
#Firefox144 #CSS
New in FF144 - 1

:active-view-transition pseudo-class
view-transition-class property
view-transition-name property
::view-transition pseudo-element
October 15, 2025 at 8:55 AM
Reposted by Ghazal
ryanmulligan.dev
Container queries and CSS make it simple to smoothly transition an element to the other side of its parent container without knowing exact dimensions or distance.

Read more in my latest post: ryanmulligan.dev/blog/transit...
October 13, 2025 at 1:25 PM
Reposted by Ghazal
joomla.org
The Joomla project is thrilled to announce the delivery of our two new babies, Joomla 6.0 and Joomla 5.4

See what's new in Joomla 6: https://ow.ly/4lQ250XaYF9
Download Joomla 6: https://ow.ly/AQNR50XaYH2
#joomla #joomla6 #opensource #cms #osm
October 14, 2025 at 4:02 PM
Reposted by Ghazal
extlynews.bsky.social
NEWS: Joomla 6.0 and #Joomla 5.4 are here! https://ppub.link/pfn1i
Joomla 6.0 and #Joomla 5.4 are here!
October 14, 2025 at 6:03 PM