{"id":376,"date":"2024-06-07T11:00:00","date_gmt":"2024-06-07T11:00:00","guid":{"rendered":"https:\/\/kerrprogroup.com\/?p=376"},"modified":"2025-03-19T12:20:49","modified_gmt":"2025-03-19T12:20:49","slug":"useful-css-tips-and-techniques","status":"publish","type":"post","link":"https:\/\/kerrprogroup.com\/index.php\/2024\/06\/07\/useful-css-tips-and-techniques\/","title":{"rendered":"Useful CSS Tips And Techniques"},"content":{"rendered":"<p>              <title>Useful CSS Tips And Techniques<\/title><\/p>\n<article>\n<header>\n<h1>Useful CSS Tips And Techniques<\/h1>\n<address>Cosima Mielke<\/address>\n<p>                  2024-06-07T11:00:00+00:00<br \/>\n                  2025-03-19T12:04:52+00:00<br \/>\n                <\/header>\n<p>If you\u2019ve been in the web development game for longer, you might recall the days when CSS was utterly confusing and you had to come up with hacks and workarounds to make things work. Luckily, these days are over and new features such as <a href=\"https:\/\/ishadeed.com\/article\/css-container-query-guide\/\">container queries<\/a>, cascade layers, <a href=\"https:\/\/css-irl.info\/css-nesting-is-here\/\">CSS nesting<\/a>, the <code>:has<\/code> selector, grid and subgrid, and even <a href=\"https:\/\/web.dev\/blog\/color-spaces-and-functions\">new color spaces<\/a> make CSS <strong>more powerful than ever before<\/strong>.<\/p>\n<p>And the innovation doesn\u2019t stop here. We also might have <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/style-queries\">style queries<\/a> and perhaps even <a href=\"https:\/\/ishadeed.com\/article\/css-state-queries\/\">state queries<\/a>, along with <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-headlines-are-about-to-get-awesome\/\">balanced text-wrapping<\/a> and <a href=\"https:\/\/developer.chrome.com\/blog\/tether-elements-to-each-other-with-css-anchor-positioning\">CSS anchor positioning<\/a> coming our way.<\/p>\n<p>With all these <strong>lovely new CSS features<\/strong> on the horizon, in this post, we dive into the world of CSS with a few helpful techniques, a deep-dive into specificity, hanging punctuation, and self-modifying CSS variables. We hope they\u2019ll come in handy in your work.<\/p>\n<h2 id=\"cascade-and-specificity-primer\">Cascade And Specificity Primer<\/h2>\n<p>Many fear the cascade and specificity in CSS. However, the concept isn\u2019t as hard to get to grips with as one might think. To help you get more comfortable with <strong>two of the most fundamental parts of CSS<\/strong>, Andy Bell wrote a wonderful <a href=\"https:\/\/piccalil.li\/blog\/a-primer-on-the-cascade-and-specificity\">primer on the cascade and specificity<\/a>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/piccalil.li\/blog\/a-primer-on-the-cascade-and-specificity\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"453\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A primer on the cascade and specificity\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/cascade-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The cascade and specificity <a href=\"https:\/\/piccalil.li\/blog\/a-primer-on-the-cascade-and-specificity\">aren\u2019t as complex as one might think<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/cascade-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The guide explains how certain CSS property types will be prioritized over others and dives deeper into <strong>specificity scoring<\/strong> to help you assess how likely it is that the CSS of a specific rule will apply. Andy uses practical examples to illustrate the concepts and simplifies the underlying mental model to make it easy to adopt and utilize. A power boost for your CSS skills.<\/p>\n<h2 id=\"testing-html-with-modern-css\">Testing HTML With Modern CSS<\/h2>\n<p>Have you ever considered testing HTML with CSS instead of JavaScript? <strong>CSS selectors<\/strong> today are so powerful that it is actually possible to test for most kinds of HTML patterns using CSS alone. A proponent of the practice, Heydon Pickering summarized everything you need to know about <a href=\"https:\/\/heydonworks.com\/article\/testing-html-with-modern-css\/\">testing HTML with CSS<\/a>, whether you want to test accessibility, uncover HTML bloat, or check the general usability.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/heydonworks.com\/article\/testing-html-with-modern-css\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"191\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Testing HTML With Modern CSS\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/testing-html-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Heydon Pickering shows <a href=\"https:\/\/heydonworks.com\/article\/testing-html-with-modern-css\/\">how to test HTML with CSS<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/testing-html-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As Heydon points out, testing with CSS has quite some benefits. Particularly if you work in the browser and prefer exploring <strong>visual regressions<\/strong> and inspector information over command line logs, testing with CSS could be for you. It also shines in situations where you don\u2019t have direct access to a client\u2019s stack: Just provide a test stylesheet, and clients can locate instances of bad patterns you have identified for them without having to onboard you to help them do so. Clever!<\/p>\n<h2 id=\"self-modifying-css-variables\">Self-Modifying CSS Variables<\/h2>\n<p>The CSS spec for custom properties does not allow a <strong>custom property to reference itself<\/strong> \u2014 although there are quite some use cases where such a feature would be useful. To close the gap, Lea Verou <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/2864\">proposed an <code>inherit()<\/code> function<\/a> in 2018, which the CSSWG added to the specs in 2021. It hasn\u2019t been edited-in yet, but Roman Komarov found a <a href=\"https:\/\/kizu.dev\/self-modifying-variables\/\">workaround<\/a> that makes it possible to start involving its behavior.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/kizu.dev\/self-modifying-variables\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"365\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Self-Modifying Variables: the inherit Workaround\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/self-modifying-variables-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      As we are waiting for <code>inherit()<\/code> to arrive, Roman Komarov found a <a href=\"https:\/\/kizu.dev\/self-modifying-variables\/\">workaround that allows us to access the previous state of a property<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/self-modifying-variables-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Roman\u2019s approach uses container-style queries as a way to access the previous state of a custom property. It can be useful when you want to <strong>cycle through various hues<\/strong> without having a static list of values, to match the <code>border-radius<\/code> visually, or to nest menu lists, for example. The workaround is still strictly experimental (so do not use it in production!), but since it is likely that style queries will gain broad browser support before <code>inherit()<\/code>, it has great potential.<\/p>\n<h2 id=\"hanging-punctuation-in-css\">Hanging Punctuation In CSS<\/h2>\n<p><code>hanging-punctuation<\/code> is a neat little CSS property. It extends punctuation marks such as <strong>opening quotes<\/strong> to cater to nice, clean blocks of text. And while it\u2019s currently only supported in Safari, it doesn\u2019t hurt to include it in your code, as the property is a perfect example of progressive enhancement: It leaves things as they are in browsers that don\u2019t support it and adds the extra bit of polish in browsers that do.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/adactio.com\/journal\/21027\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"231\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Hanging punctuation in CSS\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/hanging-punctuation-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Jeremy Keith shares a little <a href=\"https:\/\/adactio.com\/journal\/21027\">gotcha<\/a> to help you fix an unintended side effect of hanging punctuation. (<a href=\"https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/hanging-punctuation-opt.png\">Large preview<\/a>) (Image credit: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/hanging-punctuation#examples\">MDN Web Docs<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Jeremy Keith noticed an <a href=\"https:\/\/adactio.com\/journal\/21027\">unintended side-effect<\/a> of <code>hanging-punctuation<\/code>, though. When you apply it globally, it\u2019s also applied to form fields. So, if the text in a form field starts with a quotation mark or some other piece of punctuation, it\u2019s pushed outside the field and hidden. Jeremy shares a fix for it: Add <code>input, textarea { hanging-punctuation: none; }<\/code> to prevent your quotation marks from disappearing. A small tip that can save you a lot of headaches.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"fixing-aspect-ratio-issues\">Fixing <code>aspect-ratio<\/code> Issues<\/h2>\n<p>The <code>aspect-ratio<\/code> property shines in fluid environments. It can handle anything from inserting a square-shaped <code><\/p>\n<div><\/div>\n<p><\/code> to matching the 16:9 size of a <code><video><\/video><\/code>, without you thinking in exact dimensions. And most of the time, it does so flawlessly. However, there are some <strong>things that can break <code>aspect-ratio<\/code><\/strong>. Chris Coyier takes a closer look at three <a href=\"https:\/\/frontendmasters.com\/blog\/things-that-can-break-aspect-ratio-in-css\/\">reasons why your <code>aspect-ratio<\/code> might not work as expected<\/a>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/frontendmasters.com\/blog\/things-that-can-break-aspect-ratio-in-css\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"476\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Things That Can Break aspect-ratio in CSS\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/breaking-aspect-ratio-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      If your <code>aspect-ratio<\/code> doesn\u2019t work as expected, <a href=\"https:\/\/frontendmasters.com\/blog\/things-that-can-break-aspect-ratio-in-css\/\">Chris Coyier might have the solution<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/breaking-aspect-ratio-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As Chris explains, one potential breakage is setting both dimensions \u2014 which might seem obvious, but it can be confusing if one of the dimensions is set from somewhere you didn\u2019t expect. Stretching and content that forces height can also lead to unexpected results. A great overview of what to look out for when <code>aspect-ratio<\/code> breaks.<\/p>\n<h2 id=\"masonry-layout-with-css\">Masonry Layout With CSS<\/h2>\n<p>CSS Grid has taken layouts on the web to the next level. However, as powerful as CSS is today, not every layout that can be imagined is feasible. Masonry layout is one of those things that can\u2019t be accomplished with CSS alone. To change that, the CSS Working Group is <strong>asking for your help<\/strong>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/webkit.org\/blog\/15269\/help-us-invent-masonry-layouts-for-css-grid-level-3\/\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"496\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Masonry Layout\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/masonry-layout-opt.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      How should masonry layout be incorporated into CSS? The CSS Working Group is <a href=\"https:\/\/webkit.org\/blog\/15269\/help-us-invent-masonry-layouts-for-css-grid-level-3\/\">asking for your help<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/css-tips-and-techniques\/masonry-layout-opt.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There are currently <strong>two approaches<\/strong> in discussion at the CSS Working Group about how CSS should handle masonry-style layouts \u2014 and they are asking for insights from real-world developers and designers to find the best solution.<\/p>\n<p>The first approach would expand CSS Grid to include masonry, and the second approach would be to introduce a masonry layout as a <code>display: masonry<\/code> display type. Jen Simmons summarized <a href=\"https:\/\/webkit.org\/blog\/15269\/help-us-invent-masonry-layouts-for-css-grid-level-3\/\">what you need to know about the ongoing debate<\/a> and how you can contribute your thoughts on which direction CSS should take.<\/p>\n<p>Before you come to a conclusion, also be sure to read <a href=\"https:\/\/developer.chrome.com\/blog\/masonry\">Rachel Andrew\u2019s post<\/a> on the topic. She explains why the Chrome team has concerns about implementing a masonry layout as a part of the CSS Grid specification and clarifies what the alternate proposal enables.<\/p>\n<h2 id=\"boost-your-css-skills\">Boost Your CSS Skills<\/h2>\n<p>If you\u2019d like to dive deeper into CSS, we\u2019ve got your back \u2014 with a few friendly events and SmashingConfs coming up this year:<\/p>\n<ul>\n<li><a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\/modern-css-manuel-matuzovic\/\">Advanced Modern CSS Masterclass<\/a> with Manuel Matuzovi\u0107, <strong>June 24 \u2013 July 8<\/strong><\/li>\n<li><a href=\"https:\/\/smashingconf.com\/freiburg-2024\">SmashingConf Freiburg 2024<\/a> \ud83c\udde9\ud83c\uddea \u2014 The Web, <strong>Sep 9\u201311<\/strong><\/li>\n<li><a href=\"https:\/\/smashingconf.com\/ny-2024\">SmashingConf New York 2024<\/a> \ud83c\uddfa\ud83c\uddf8 \u2014 Front-End &amp; UX, <strong>Oct 7\u201310<\/strong><\/li>\n<li><a href=\"https:\/\/smashingconf.com\/antwerp-2024\">SmashingConf Antwerp 2024<\/a> \ud83c\udde7\ud83c\uddea \u2014 Design &amp; UX, <strong>Oct 28\u201331<\/strong><\/li>\n<\/ul>\n<p>We\u2019d be absolutely delighted to welcome you to one of our special Smashing experiences \u2014 be it online or in person!<\/p>\n<h2 id=\"smashing-weekly-newsletter\">Smashing Weekly Newsletter<\/h2>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\"><img decoding=\"async\" loading=\"lazy\" style=\"float:right;margin-top:1em;margin-left:1.5em;margin-bottom:1em;border-radius:11px;max-width:50%\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"200\" alt=\"The weekly Smashing Newsletter\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/smashing-cat\/cat-with-slippers.svg\"><\/a>With our <a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\">weekly newsletter<\/a>, we aim to bring you <strong>useful, practical tidbits<\/strong> and share some of the helpful things that folks are working on in the web industry. There are <em>so<\/em> many talented folks out there working on brilliant projects, and we\u2019d appreciate it if you could help spread the word and give them the credit they deserve!<\/p>\n<p>Also, <a href=\"https:\/\/www.smashingmagazine.com\/the-smashing-newsletter\/\">by subscribing<\/a>, there are no third-party mailings or hidden advertising, and your support really helps us pay the bills. \u2764\ufe0f<\/p>\n<p><em>Interested in sponsoring? Feel free to check out our <a href=\"https:\/\/smashingmagazine.com\/provide\/SmashingMag_SmashingConf_Partnership_2020.pdf\">partnership options<\/a> and <a href=\"mailto:advertising@smashingmagazine.com\">get in touch<\/a> with the team anytime \u2014 they\u2019ll be sure to get back to you as soon as they can.<\/em><\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Useful CSS Tips And Techniques Useful CSS Tips And Techniques Cosima Mielke 2024-06-07T11:00:00+00:00 2025-03-19T12:04:52+00:00 If you\u2019ve been in the web development game for longer, you might recall the days when CSS was utterly confusing and you had to come up with hacks and workarounds to make things work. Luckily, these days are over and new features such as container queries, cascade layers, CSS nesting, the :has selector, grid and subgrid,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts\/376"}],"collection":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":1,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/posts\/376\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kerrprogroup.com\/index.php\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}