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
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
Reposted by Ghazal
matthiasott.com
✍️ New post: CSS :is() :where() the Mag­ic Happens
🪄

#blogtober #css #css #css
matthiasott.com/notes/css-is...
CSS :is() :where() the Magic Happens · Matthias Ott
Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.
matthiasott.com
October 8, 2025 at 1:36 PM
Reposted by Ghazal
avonture.be
How should you structure your program to have a #Docker image for production and, when working locally, extend it with development tools (#devcontainer)?

In this article, let's see how to proceed. One image for the deployment and, locally, using VSCode and the devcontainer feature.
One Docker Image for Production and Devcontainers - The Clean Way | Christophe Avonture
Learn how to design a Docker setup that delivers a secure, minimal production image while enabling effortless local development through VS Code Devcontainers with clean overrides and environment isola...
www.avonture.be
October 13, 2025 at 6:12 AM
Reposted by Ghazal
bryanhogan.com
I've been working on a guide about making websites by writing scalable HTML and CSS: webdev.bryanhogan.com
Web Dev Helper Guide
Web development guide and a collection of web components to use for any web development project.
webdev.bryanhogan.com
October 3, 2025 at 5:43 AM
Reposted by Ghazal
mozilla.activitypub.awakari.com.ap.brid.gy
Regex in CSS Do you know Regex? That weird-looking string you often see in code for validating text inputs. Regex can be used in HTML with the pattern attribute, for example: #webdev #css

Origin | Interest | Match
Regex in CSS
Do you know Regex? That weird-looking string you often see in code for validating text inputs. Regex...
dev.to
October 2, 2025 at 3:40 AM
Reposted by Ghazal
polypane.app
Custom media queries are actively being worked on in Chromium, so it won't be long until we can update our complete guide to CSS Media queries!

Check it out to get a head start on using custom media queries.

polypane.app/blog/the-com...
The complete guide to CSS media queries | Polypane
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device…
polypane.app
October 2, 2025 at 7:25 AM
Reposted by Ghazal
inautilo.bsky.social
#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” ilo.im/1679ci by Daniel Schwarz

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting
How much do you really know about media queries?
There are a ton more @media queries than
ilo.im
October 1, 2025 at 8:16 AM