<?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>Fri, 28 Aug 2026 15:54:21 +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>Creating Web Widgets Using the Document Picture-in-Picture API</title>
		<link>https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/</link>
					<comments>https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/#respond</comments>
		
		<dc:creator><![CDATA[Daniel Schwarz]]></dc:creator>
		<pubDate>Thu, 27 Aug 2026 14:41:06 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[picture-in-picture]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=395259</guid>

					<description><![CDATA[<p>The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/">Creating Web Widgets Using the Document Picture-in-Picture API</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/creating-web-widgets-using-the-document-picture-in-picture-api/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">395259</post-id>	</item>
		<item>
		<title>animation-trigger</title>
		<link>https://css-tricks.com/almanac/properties/a/animation-trigger/</link>
		
		<dc:creator><![CDATA[Saleh Mubashar]]></dc:creator>
		<pubDate>Wed, 26 Aug 2026 15:38:41 +0000</pubDate>
				<category><![CDATA[scroll-triggered animations]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?page_id=394713</guid>

					<description><![CDATA[<p>The CSS <code>animation-trigger</code> property allows you to delay the start of a CSS animation until a specific trigger occurs.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/properties/a/animation-trigger/">animation-trigger</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">394713</post-id>	</item>
		<item>
		<title>MicroLighter: Syntax Highlighter</title>
		<link>https://css-tricks.com/microlighter-syntax-highlighter/</link>
					<comments>https://css-tricks.com/microlighter-syntax-highlighter/#comments</comments>
		
		<dc:creator><![CDATA[Geoff Graham]]></dc:creator>
		<pubDate>Tue, 25 Aug 2026 14:10:34 +0000</pubDate>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[custom highlight api]]></category>
		<category><![CDATA[resource]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=396665</guid>

					<description><![CDATA[<p>Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/microlighter-syntax-highlighter/">MicroLighter: Syntax Highlighter</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/microlighter-syntax-highlighter/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">396665</post-id>	</item>
		<item>
		<title>WordPress PHP-Only Block Registration</title>
		<link>https://css-tricks.com/wordpress-php-block-registration/</link>
					<comments>https://css-tricks.com/wordpress-php-block-registration/#respond</comments>
		
		<dc:creator><![CDATA[Fränk Klein]]></dc:creator>
		<pubDate>Mon, 24 Aug 2026 13:54:02 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WordPress blocks]]></category>
		<guid isPermaLink="false">https://css-tricks.com/?p=395401</guid>

					<description><![CDATA[<p>Seven and half years after blocks arrived in Core, WordPress introduces a way to build blocks without React annd build pipelines. All you need is PHP.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/wordpress-php-block-registration/">WordPress PHP-Only Block Registration</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-php-block-registration/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">395401</post-id>	</item>
		<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>
	</channel>
</rss>

<!-- plugin=object-cache-pro client=phpredis metric#hits=5387 metric#misses=7 metric#hit-ratio=99.9 metric#bytes=6440082 metric#prefetches=308 metric#store-reads=26 metric#store-writes=3 metric#store-hits=316 metric#store-misses=4 metric#sql-queries=30 metric#ms-total=276.07 metric#ms-cache=26.75 metric#ms-cache-avg=0.9552 metric#ms-cache-ratio=9.7 sample#redis-hits=7187739359 sample#redis-misses=175243821 sample#redis-hit-ratio=97.6 sample#redis-ops-per-sec=119 sample#redis-evicted-keys=0 sample#redis-used-memory=673101752 sample#redis-used-memory-rss=736407552 sample#redis-memory-fragmentation-ratio=1.1 sample#redis-connected-clients=3 sample#redis-tracking-clients=0 sample#redis-rejected-connections=0 sample#redis-keys=1065766 -->
