https://nicobruenjes.dev/category/css/

1<!DOCTYPE html>
2
3<html class="no-js" lang="en-US">
4
5	<head>
6
7		<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
8		<meta name="viewport" content="width=device-width, initial-scale=1.0" >
9
10		<link rel="profile" href="http://gmpg.org/xfn/11">
11
12		<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website" />
13<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Nico Bruenjes" />
14<meta prefix="og: http://ogp.me/ns#" property="og:description" content="digital creative and www craftsman" />
15<meta prefix="og: http://ogp.me/ns#" property="og:image" content="https://nicobruenjes.dev/wp-content/uploads/2024/10/nico_thorsminde.jpg" />
16<meta prefix="og: http://ogp.me/ns#" property="og:url" content="https://nicobruenjes.dev" />
17<title>CSS &#8211; Nico Bruenjes</title>

18<script>var _activityPubOptions = {"namespace":"activitypub\/1.0","defaultAvatarUrl":"https:\/\/nicobruenjes.dev\/wp-content\/plugins\/activitypub\/assets\/img\/mp.jpg","enabled":{"site":true,"users":false}};</script>

18<meta name='robots' content='noindex, nofollow'>
19<link rel='dns-prefetch' href='//cpwebassets.codepen.io'>
20<link rel="alternate" type="application/rss+xml" title="Nico Bruenjes &raquo; Feed" href="https://nicobruenjes.dev/feed/">
21<link rel="alternate" type="application/rss+xml" title="Nico Bruenjes &raquo; Comments Feed" href="https://nicobruenjes.dev/comments/feed/">
22<link rel="alternate" type="application/rss+xml" title="Nico Bruenjes &raquo; CSS Category Feed" href="https://nicobruenjes.dev/category/css/feed/">
23<link rel='stylesheet' id='mcluhan-fonts-css' href='https://nicobruenjes.dev/wp-content/themes/mcluhan/assets/css/fonts.css?ver=cp_3c43ea58' media='all'>
24<link rel='stylesheet' id='fontawesome-css' href='https://nicobruenjes.dev/wp-content/themes/mcluhan/assets/css/font-awesome.css?ver=cp_3c43ea58' media='all'>
25<link rel='stylesheet' id='mcluhan-style-css' href='https://nicobruenjes.dev/wp-content/themes/mcluhan/style.css?ver=2.1.1' media='all'>

26<script src='https://nicobruenjes.dev/wp-includes/js/jquery/jquery.min.js?ver=3.6.3' id='jquery-core-js'></script>

26

27<script src='https://nicobruenjes.dev/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.0' id='jquery-migrate-js'></script>

27
28<link rel="https://api.w.org/" href="https://nicobruenjes.dev/wp-json/"><link rel="alternate" type="application/json" href="https://nicobruenjes.dev/wp-json/wp/v2/categories/2"><meta name="generator" content="WordPress 6.2.11 (compatible; ClassicPress 2.7.1)">
29<meta property="fediverse:creator" name="fediverse:creator" content="[email protected]" />
30
31			<!-- Customizer CSS -->
32
33			<style type="text/css">
34
35				body .site-header { background-color:#fcd114; }.social-menu.desktop { background-color:#fcd114; }.social-menu a:hover { color:#fcd114; }.social-menu a.active { color:#fcd114; }.mobile-menu-wrapper { background-color:#fcd114; }.social-menu.mobile { background-color:#fcd114; }.mobile-search.active { background-color:#fcd114; }
36			</style>
37
38			<!-- /Customizer CSS -->
39
40					

40<script>jQuery( 'html' ).removeClass( 'no-js' ).addClass( 'js' );</script>

40
41		<link rel="icon" href="https://nicobruenjes.dev/wp-content/uploads/2024/10/cropped-avataaars_nico-32x32.png" sizes="32x32">
42<link rel="icon" href="https://nicobruenjes.dev/wp-content/uploads/2024/10/cropped-avataaars_nico-192x192.png" sizes="192x192">
43<link rel="apple-touch-icon" href="https://nicobruenjes.dev/wp-content/uploads/2024/10/cropped-avataaars_nico-180x180.png">
44<meta name="msapplication-TileImage" content="https://nicobruenjes.dev/wp-content/uploads/2024/10/cropped-avataaars_nico-270x270.png">
45		<style id="wp-custom-css">
46			.related-post .related-post-image {
47	background-color: #fcd114;
48	background-image: url(https://nicobruenjes.dev/wp-content/uploads/2024/12/transparent.png);
49	background-size: 50%;
50}
51
52.entry-content a {
53    border-bottom: 1px solid #fcd114;
54    text-decoration: none;
55}
56
57form#webmention-form {
58    margin-top: 40px;
59    padding: 30px 0 0 34.125%;
60}
61
62#webmention-form p {
63	  font-family: Archivo, 'Helvetica Neue', sans-serif;
64    font-size: 1em;
65    line-height: 1.25;
66    margin-bottom: 1em;
67}
68
69input#webmention-submit {
70    background: transparent url(https://nicobruenjes.dev/wp-content/themes/mcluhan/assets/images/arrow-black-right.svg) no-repeat right center;
71    background-size: auto 12px;
72    border-bottom: 1px solid transparent;
73    color: #121212;
74    font-size: 1em;
75    font-weight: 600;
76    padding: 0 25px 0 0;
77    transition: border-color .15s linear;
78}
79
80p:has(> #webmention-submit) {
81    text-align: right;
82}
83
84input#webmention-submit:hover {
85    border-bottom-color: #121212;
86}
87
88@media (max-width: 800px) {
89	form#webmention-form {
90		padding: 25px 0 0 0;
91	}	
92}
93
94@media (prefers-reduced-motion: no-preference) {
95	@view-transition {
96		navigation: auto;
97	}
98}
99
100.avatar.alignnone.avatar-activitypub {
101	margin: 0;
102}		</style>
103		
104	</head>
105
106	<body class="archive category category-css category-2 dark">
107
108		
109		<a class="skip-link button" href="#site-content">Skip to the content</a>
110
111		<header class="site-header group">
112
113			
114			<p class="site-title"><a href="https://nicobruenjes.dev" class="site-name">Nico Bruenjes</a></p>
115
116			
117				<div class="site-description"><p>digital creative and www craftsman</p>
118</div>
119
120			
121			<div class="nav-toggle">
122				<div class="bar"></div>
123				<div class="bar"></div>
124			</div>
125
126			<div class="menu-wrapper">
127
128				<ul class="main-menu desktop">
129
130					<li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-58"><a href="https://nicobruenjes.dev/">Homepage</a></li>
131<li id="menu-item-76" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-76"><a href="https://nicobruenjes.dev/category/a11y/">A11Y</a></li>
132<li id="menu-item-75" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-75"><a href="https://nicobruenjes.dev/category/css/" aria-current="page">CSS</a></li>
133<li id="menu-item-77" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-77"><a href="https://nicobruenjes.dev/category/javascript/svelte/">Svelte</a></li>
134<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="https://nicobruenjes.dev/about/">About</a></li>
135				</ul>
136
137			</div><!-- .menu-wrapper -->
138
139			
140				<div class="social-menu desktop">
141
142					<ul class="social-menu-inner">
143
144						<li class="social-search-wrapper"><a href="https://nicobruenjes.dev/?s="></a></li>
145
146						
147					</ul><!-- .social-menu-inner -->
148
149				</div><!-- .social-menu -->
150
151			
152		</header><!-- header -->
153
154		<div class="mobile-menu-wrapper">
155
156			<ul class="main-menu mobile">
157				<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-58"><a href="https://nicobruenjes.dev/">Homepage</a></li>
158<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-76"><a href="https://nicobruenjes.dev/category/a11y/">A11Y</a></li>
159<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-75"><a href="https://nicobruenjes.dev/category/css/" aria-current="page">CSS</a></li>
160<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-77"><a href="https://nicobruenjes.dev/category/javascript/svelte/">Svelte</a></li>
161<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="https://nicobruenjes.dev/about/">About</a></li>
162					<li class="toggle-mobile-search-wrapper"><a href="#" class="toggle-mobile-search">Search</a></li>
163							</ul><!-- .main-menu.mobile -->
164
165			
166		</div><!-- .mobile-menu-wrapper -->
167
168		
169			<div class="mobile-search">
170
171				<div class="untoggle-mobile-search"></div>
172
173				
174<form role="search" method="get" class="search-form" action="https://nicobruenjes.dev/">
175	<label class="screen-reader-text" for="search-form-6ac95f9761c6b">Search for:</label>
176	<input type="search" id="search-form-6ac95f9761c6b" class="search-field" placeholder="Enter your search query" value="" name="s" autocomplete="off" />
177	</button>
178</form>
179
180				<div class="mobile-results">
181
182					<div class="results-wrapper"></div>
183

184				</div>
185
186			</div><!-- .mobile-search -->
187
188			<div class="search-overlay">
189
190				
191<form role="search" method="get" class="search-form" action="https://nicobruenjes.dev/">
192	<label class="screen-reader-text" for="search-form-6ac95f9761cc3">Search for:</label>
193	<input type="search" id="search-form-6ac95f9761cc3" class="search-field" placeholder="Enter your search query" value="" name="s" autocomplete="off" />
194	</button>
195</form>
196
197			</div><!-- .search-overlay -->
198
199		
200		<main class="site-content" id="site-content">
201<div class="section-inner">
202
203	
204		<header class="page-header">
205
206							<h4 class="page-subtitle">Category</h4>
207			
208							<h1 class="page-title">CSS</h1>
209			
210			
211			
212		</header><!-- .page-header -->
213
214		
215		<div class="posts" id="posts">
216
217			<ul>
218						<li>
219							<h3 class="list-title"><a href="https://nicobruenjes.dev/2025/">2025</a></h3>
220						</li>
221
222						<li class="post-preview post-246 post type-post status-publish format-standard hentry category-css tag-a11y tag-performance missing-thumbnail" id="post-246">
223
224	<a href="https://nicobruenjes.dev/2025/01/10/using-content-visibility/">
225		<h2 class="title"><span>Using “content-visibility”</span></h2><time>Jan 10</time>	</a>
226
227</li>
228<li class="post-preview post-230 post type-post status-publish format-standard hentry category-css tag-codepen tag-text-wrap missing-thumbnail" id="post-230">
229
230	<a href="https://nicobruenjes.dev/2025/01/06/exploring-the-balance-and-pretty-values-of-text-wrap/">
231		<h2 class="title"><span>Exploring the “balance” and “pretty” values of text-wrap</span></h2><time>Jan 6</time>	</a>
232
233</li>
234<li class="post-preview post-227 post type-post status-publish format-standard hentry category-css tag-baseline tag-print missing-thumbnail" id="post-227">
235
236	<a href="https://nicobruenjes.dev/2025/01/02/late-to-the-baseline-page/">
237		<h2 class="title"><span>Late to the baseline: @page</span></h2><time>Jan 2</time>	</a>
238
239</li>
240</ul><!-- /2025--><ul>
241						<li>
242							<h3 class="list-title"><a href="https://nicobruenjes.dev/2024/">2024</a></h3>
243						</li>
244
245						<li class="post-preview post-186 post type-post status-publish format-standard hentry category-css category-html category-javascript missing-thumbnail" id="post-186">
246
247	<a href="https://nicobruenjes.dev/2024/12/02/advent-calendars/">
248		<h2 class="title"><span>Advent calendars</span></h2><time>Dec 2</time>	</a>
249
250</li>
251<li class="post-preview post-177 post type-post status-publish format-standard hentry category-css tag-color missing-thumbnail" id="post-177">
252
253	<a href="https://nicobruenjes.dev/2024/11/18/current-color/">
254		<h2 class="title"><span>Current color</span></h2><time>Nov 18</time>	</a>
255
256</li>
257<li class="post-preview post-108 post type-post status-publish format-standard hentry category-css category-javascript category-links tag-apps tag-frameworks tag-safari tag-web-components missing-thumbnail" id="post-108">
258
259	<a href="https://nicobruenjes.dev/2024/10/28/bookmarks-1/">
260		<h2 class="title"><span>Bookmarks (1)</span></h2><time>Oct 28</time>	</a>
261
262</li>
263<li class="post-preview post-91 post type-post status-publish format-standard hentry category-css missing-thumbnail" id="post-91">
264
265	<a href="https://nicobruenjes.dev/2024/10/24/modernes-css-einfuehren-ist-nicht-leicht/">
266		<h2 class="title"><span>Modernes CSS einführen… ist nicht leicht!</span></h2><time>Oct 24</time>	</a>
267
268</li>
269<li class="post-preview post-78 post type-post status-publish format-standard hentry category-a11y category-css category-html missing-thumbnail" id="post-78">
270
271	<a href="https://nicobruenjes.dev/2024/10/24/a-case-for-popover/">
272		<h2 class="title"><span>A case for „popover“</span></h2><time>Oct 24</time>	</a>
273
274</li>
275<li class="post-preview post-23 post type-post status-publish format-standard has-post-thumbnail hentry category-css has-thumbnail" id="post-23">
276
277	<a href="https://nicobruenjes.dev/2024/10/23/where-considered-useful/">
278		<h2 class="title"><span>:where() considered useful</span></h2><time>Oct 23</time>	</a>
279
280</li>
281
282		</div><!-- .posts -->
283
284	
285</div><!-- .section-inner -->
286
287
288
289			<footer class="site-footer section-inner">
290				
291				<p class="copyright">&copy; 2026 <a href="https://nicobruenjes.dev" class="site-name">Nico Bruenjes</a></p>
292				<p class="theme-by">Theme by <a href="https://andersnoren.se">Anders Nor&eacute;n</a></p>
293
294			</footer> <!-- footer -->
295
296		</main>
297		
298		

298<script src='https://cpwebassets.codepen.io/assets/embed/ei.js?ver=1.0.1' id='codepen-embed-script-js'></script>

298

299<script src='https://nicobruenjes.dev/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script>

299

300<script src='https://nicobruenjes.dev/wp-includes/js/masonry.min.js?ver=4.2.2' id='masonry-js'></script>

300

301<script id='mcluhan_global-js-extra'>
302var mcluhan_ajaxpagination = {"ajaxurl":"https:\/\/nicobruenjes.dev\/wp-admin\/admin-ajax.php","query_vars":"{\"category_name\":\"css\"}"};
303</script>

303

304<script src='https://nicobruenjes.dev/wp-content/themes/mcluhan/assets/js/global.js?ver=2.1.1' id='mcluhan_global-js'></script>

304
305			
306	</body>
307</html>