<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CSS-Tricks</title>
	<atom:link href="https://css-tricks.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://css-tricks.com</link>
	<description>A learning community for front-end designers and developers</description>
	<lastBuildDate>Sat, 22 Aug 2026 13:08:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&#038;ssl=1</url>
	<title>CSS-Tricks</title>
	<link>https://css-tricks.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">45537868</site>	<item>
		<title>Resolved: CSS Class Prefix Selector</title>
		<link>https://css-tricks.com/resolved-css-class-prefix-selector/</link>
					<comments>https://css-tricks.com/resolved-css-class-prefix-selector/#comments</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Fri, 21 Aug 2026 15:13:03 +0000</pubDate>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[selectors]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396644</guid>

					<description><![CDATA[<p>A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like <code>.prefix-*</code>.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/resolved-css-class-prefix-selector/">Resolved: CSS Class Prefix Selector</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/resolved-css-class-prefix-selector/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396644</post-id>	</item>
		<item>
		<title>CSS Navigation Matching, Early Days</title>
		<link>https://css-tricks.com/css-navigation-matching-early-days/</link>
					<comments>https://css-tricks.com/css-navigation-matching-early-days/#respond</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Wed, 19 Aug 2026 14:44:41 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[css navigation]]></category>
		<category><![CDATA[view transitions]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396428</guid>

					<description><![CDATA[<p>Apply a style when someone navigates from one specific page to another. The idea being it'd make the sources for cross-document view transitions declarative in CSS rather than managing that stuff in JavaScript.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-navigation-matching-early-days/">CSS Navigation Matching, Early Days</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/css-navigation-matching-early-days/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396428</post-id>	</item>
		<item>
		<title>WordPress.com Student Plan</title>
		<link>https://css-tricks.com/wordpress-student-plan/</link>
					<comments>https://css-tricks.com/wordpress-student-plan/#comments</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Wed, 19 Aug 2026 08:50:00 +0000</pubDate>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[education]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396623</guid>

					<description><![CDATA[<p>As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project. Hosting those projects has always been a roadblock though.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/wordpress-student-plan/">WordPress.com Student Plan</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/wordpress-student-plan/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396623</post-id>	</item>
		<item>
		<title>Dark mode toggles: two states are enough</title>
		<link>https://css-tricks.com/dark-mode-toggles-two-states-are-enough/</link>
					<comments>https://css-tricks.com/dark-mode-toggles-two-states-are-enough/#comments</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Mon, 17 Aug 2026 14:15:50 +0000</pubDate>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[dark mode]]></category>
		<category><![CDATA[UI/UX Design]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396545</guid>

					<description><![CDATA[<p>Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and system.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/dark-mode-toggles-two-states-are-enough/">Dark mode toggles: two states are enough</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/dark-mode-toggles-two-states-are-enough/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396545</post-id>	</item>
		<item>
		<title>What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More</title>
		<link>https://css-tricks.com/whats-important-17/</link>
					<comments>https://css-tricks.com/whats-important-17/#comments</comments>
		
		<dc:creator><![CDATA[Daniel Schwarz]]></dc:creator>
		<pubDate>Fri, 14 Aug 2026 14:01:51 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[news]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396557</guid>

					<description><![CDATA[<p>Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot of really cool (CSS) stuff.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-17/">What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/whats-important-17/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396557</post-id>	</item>
		<item>
		<title>Blocked aria-hidden: The Warning is Right, and Every Fix You&#8217;ve Found is Wrong</title>
		<link>https://css-tricks.com/blocked-aria-hidden-fix/</link>
					<comments>https://css-tricks.com/blocked-aria-hidden-fix/#comments</comments>
		
		<dc:creator><![CDATA[Durgesh Rajubhai Pawar]]></dc:creator>
		<pubDate>Wed, 12 Aug 2026 13:43:56 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[aria]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396255</guid>

					<description><![CDATA[<p>The warning is correct. And the recommended fixes you've probably seen are wrong. Here's what you can do instead to properly fix the issue.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/blocked-aria-hidden-fix/">Blocked aria-hidden: The Warning is Right, and Every Fix You&#8217;ve Found is Wrong</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/blocked-aria-hidden-fix/feed/</wfw:commentRss>
			<slash:comments>5</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396255</post-id>	</item>
		<item>
		<title>Animating CSS border-image</title>
		<link>https://css-tricks.com/animating-css-border-image/</link>
					<comments>https://css-tricks.com/animating-css-border-image/#comments</comments>
		
		<dc:creator><![CDATA[Preethi]]></dc:creator>
		<pubDate>Mon, 10 Aug 2026 15:58:47 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[border-image]]></category>
		<category><![CDATA[css animation]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=394978</guid>

					<description><![CDATA[<p>Border images are an overlooked feature. One neat fact is that border image slices can run across entire borders on an element, and animating it creates beautiful effects.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/animating-css-border-image/">Animating CSS border-image</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/animating-css-border-image/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">394978</post-id>	</item>
		<item>
		<title>SmashingConf Freiburg 2026, September 7-10</title>
		<link>https://css-tricks.com/smashingconf-freiburg-2026-september-7-10/</link>
					<comments>https://css-tricks.com/smashingconf-freiburg-2026-september-7-10/#respond</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Mon, 10 Aug 2026 15:57:39 +0000</pubDate>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[conference]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396506</guid>

					<description><![CDATA[<p>Smashing Magazine’s in-person conferences are back and returning to the wonderful city of Freiburg next month, September 7–10.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/smashingconf-freiburg-2026-september-7-10/">SmashingConf Freiburg 2026, September 7-10</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/smashingconf-freiburg-2026-september-7-10/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396506</post-id>	</item>
		<item>
		<title>Using and Styling the Dialog Element</title>
		<link>https://css-tricks.com/using-and-styling-the-dialog-element/</link>
					<comments>https://css-tricks.com/using-and-styling-the-dialog-element/#comments</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Fri, 07 Aug 2026 14:06:43 +0000</pubDate>
				<category><![CDATA[Guides]]></category>
		<category><![CDATA[Articles]]></category>
		<category><![CDATA[dialog]]></category>
		<category><![CDATA[html elements]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=394753</guid>

					<description><![CDATA[<p>There's a lot of nuance to the <code>&#60;dialog&#62;</code> element, a seemingly little piece of web architecture. I've got some notes from digging into it.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/using-and-styling-the-dialog-element/">Using and Styling the Dialog Element</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/using-and-styling-the-dialog-element/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">394753</post-id>	</item>
		<item>
		<title>2026 State of CSS, Devs Surveys</title>
		<link>https://css-tricks.com/2026-state-of-css-devs-surveys/</link>
					<comments>https://css-tricks.com/2026-state-of-css-devs-surveys/#respond</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Thu, 06 Aug 2026 15:54:52 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[research]]></category>
		<category><![CDATA[survey]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396471</guid>

					<description><![CDATA[<p>A few notes and takeaways from the 2026 State of CSS survey results, including a nice CSS-Tricks cameo!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/2026-state-of-css-devs-surveys/">2026 State of CSS, Devs Surveys</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/2026-state-of-css-devs-surveys/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396471</post-id>	</item>
		<item>
		<title>Gap Decorations Are Now Available, Here’s What’s New</title>
		<link>https://css-tricks.com/css-gap-decorations-now-available/</link>
					<comments>https://css-tricks.com/css-gap-decorations-now-available/#comments</comments>
		
		<dc:creator><![CDATA[Sam Davis Omekarajr]]></dc:creator>
		<pubDate>Mon, 03 Aug 2026 15:53:20 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[gap decorations]]></category>
		<category><![CDATA[layout]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396204</guid>

					<description><![CDATA[<p>Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-gap-decorations-now-available/">Gap Decorations Are Now Available, Here’s What’s New</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/css-gap-decorations-now-available/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396204</post-id>	</item>
		<item>
		<title>Get Ready For the Powerful CSS border-shape Property!</title>
		<link>https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/</link>
					<comments>https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/#comments</comments>
		
		<dc:creator><![CDATA[Temani Afif]]></dc:creator>
		<pubDate>Fri, 31 Jul 2026 15:14:00 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[border-shape]]></category>
		<category><![CDATA[borders]]></category>
		<category><![CDATA[css shapes]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=395508</guid>

					<description><![CDATA[<p>We recently got the <code>shape()</code> function and <code>corner-shape</code> property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the <code>border-shape</code> property!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/">Get Ready For the Powerful CSS border-shape Property!</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">395508</post-id>	</item>
		<item>
		<title>What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More</title>
		<link>https://css-tricks.com/whats-important-16/</link>
					<comments>https://css-tricks.com/whats-important-16/#respond</comments>
		
		<dc:creator><![CDATA[Daniel Schwarz]]></dc:creator>
		<pubDate>Fri, 31 Jul 2026 14:06:21 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[news]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396295</guid>

					<description><![CDATA[<p>The soon-Baseline sibling-index() function for animations, CSS and the 2026 FIFA World Cup, use cases for the <code>infinity</code> keyword, container "stuck" queries, and more.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-16/">What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/whats-important-16/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://css-tricks.com/wp-content/uploads/2026/07/CleanShot-2026-07-31-at-06.07.11.mp4" length="219450" type="video/mp4" />

		<post-id xmlns="com-wordpress:feed-additions:1">396295</post-id>	</item>
		<item>
		<title>writing-mode</title>
		<link>https://css-tricks.com/almanac/properties/w/writing-mode/</link>
		
		<dc:creator><![CDATA[Mojtaba Seyedi]]></dc:creator>
		<pubDate>Tue, 21 Jul 2026 09:39:10 +0000</pubDate>
				<guid isPermaLink="false">http://css-tricks.com/?page_id=244261</guid>

					<description><![CDATA[<p class="wp-block-paragraph">The <code>writing-mode</code> CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in which blocks and lines progress.</p>
<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.element {
  writing-mode: vertical-rl;
}</code></pre>
<p class="wp-block-paragraph">This is most useful in languages such as Chinese, Japanese or &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/properties/w/writing-mode/">writing-mode</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">244261</post-id>	</item>
		<item>
		<title>pointer-events</title>
		<link>https://css-tricks.com/almanac/properties/p/pointer-events/</link>
					<comments>https://css-tricks.com/almanac/properties/p/pointer-events/#comments</comments>
		
		<dc:creator><![CDATA[Mojtaba Seyedi]]></dc:creator>
		<pubDate>Wed, 15 Jul 2026 19:57:51 +0000</pubDate>
				<category><![CDATA[pointer-events]]></category>
		<guid isPermaLink="false">http://css-tricks.com/?page_id=18170</guid>

					<description><![CDATA[<p class="wp-block-paragraph">The <code>pointer-events</code> property controls whether an element can become the target of pointer events like clicks, hover states, and other pointer-based events. In other words, it lets you decide whether the browser should treat an element as interactive when the &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/properties/p/pointer-events/">pointer-events</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>
]]></description>
		
					<wfw:commentRss>https://css-tricks.com/almanac/properties/p/pointer-events/feed/</wfw:commentRss>
			<slash:comments>35</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">18170</post-id>	</item>
	</channel>
</rss>

<!-- plugin=object-cache-pro client=phpredis metric#hits=6341 metric#misses=7 metric#hit-ratio=99.9 metric#bytes=7034913 metric#prefetches=408 metric#store-reads=28 metric#store-writes=2 metric#store-hits=416 metric#store-misses=4 metric#sql-queries=30 metric#ms-total=287.86 metric#ms-cache=18.09 metric#ms-cache-avg=0.6237 metric#ms-cache-ratio=6.3 -->
