Useful CSS Tips And Techniques — Smashing Magazine

If you have been in the web development business for a while, you might remember the days when CSS was completely confusing and you had to come up with hacks and workarounds to make things work. Thankfully, those days are over and new features like Container queriesCascade layers, CSS nestingThe :has Selector, grid and subgrid and even new color spaces Create CSS more powerful than ever.

And the innovation does not stop here. We may also have Style queries and maybe even Status queriestogether with balanced text wrapping And CSS anchor positioning is coming towards us.

With all these great new CSS features In this post, we’ll dive into the world of CSS and show you a few helpful techniques, a deep dive into specificity, hanging punctuation, and self-modifying CSS variables. We hope you’ll find them useful in your work.

Cascade and specificity primers

Many fear the cascade and specificity in CSS. However, the concept is not as difficult to understand as you might think. To help you get to grips with two of the most fundamental parts of CSSAndy Bell wrote a wonderful Primer on cascade and specificity.

The guide explains how certain CSS property types are prioritized over others and goes into more detail on Specificity assessment to help you assess how likely a given rule’s CSS is to be applied. Andy uses practical examples to illustrate the concepts and simplifies the underlying mental model to make it easier to adopt and use. A power boost for your CSS knowledge.

Testing HTML with modern CSS

Have you ever considered testing HTML with CSS instead of JavaScript? CSS selectors are so powerful today that it is actually possible to test most types of HTML patterns using CSS alone. Heydon Pickering, a proponent of this practice, has everything you need to know about Testing HTML with CSSwhether you want to test accessibility, uncover bloated HTML or check general usability.

As Heydon points out, testing with CSS has several advantages, especially if you work in the browser and prefer visual regressions and inspector information about command-line logs, testing with CSS might be right for you. It’s also useful in situations where you don’t have direct access to a client’s stack: just provide a test stylesheet and clients can find instances of broken patterns you’ve identified for them without you having to help them. Clever!

Self-modifying CSS variables

The CSS specification for custom properties does not allow custom property to refer to itself — although there are certainly some use cases where such a feature would be useful. To fill this gap, Lea Verou suggested inherit() function in 2018, which the CSSWG added to the specifications in 2021. It has not been edited yet, but Roman Komarov found a Workaround This makes it possible to begin incorporating his behavior.

Roman’s approach uses container queries to access the previous state of a custom property. This can be useful if you change through different colors without having a static list of values ​​to border-radius visually or for nesting 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 receive broad browser support before inherit()it has great potential.

Hanging punctuation in CSS

hanging-punctuation is a nice little CSS property. It extends punctuation marks like Opening quotes to create nice, clean blocks of text. And while it’s currently only supported in Safari, there’s no harm in including it in your code, as the property is a perfect example of progressive enhancement: in browsers that don’t support it, things stay as they are, and in browsers that do, that little extra is added.

Jeremy Keith noticed a unintended side effect from hanging-punctuation. If you apply it globally, it will also be applied to form fields. So if the text in a form field starts with a quotation mark or other punctuation mark, it will be moved out of the field and hidden. Jeremy shares a solution for this: Add input, textarea { hanging-punctuation: none; } to prevent your quotation marks from disappearing. A little tip that can save you a lot of headaches.

fixing aspect-ratio Problems

The aspect-ratio property shines in flowing environments. It can handle everything from inserting a square

to adapt to the 16:9 size of a without thinking in exact dimensions. And most of the time it works fine. However, there are some Things that can break aspect-ratio. Chris Coyier takes three Reasons why your aspect-ratio may not work as expected.

As Chris explains, one potential mistake is to set both dimensions. This may seem obvious, but it can be confusing if one of the dimensions is set in an unexpected place. Stretching and content that forces height can also produce unexpected results. A good overview of what to look out for when aspect-ratio breaks.

Masonry layout with CSS

CSS Grid has taken layouts on the web to the next level. But as powerful as CSS is today, not every imaginable layout can be implemented. Masonry layout is one of those things that cannot be achieved with CSS alone. To change that, the CSS Working Group ask for your help.

Currently there are two approaches in the CSS Working Group’s discussion of how CSS should handle masonry-style layouts – and they’re asking real developers and designers for insights to find the best solution.

The first approach would extend CSS Grid to include masonry, and the second approach would be to use a masonry layout as display: masonry Ad type. Jen Simmons summarized What you need to know about the ongoing debate and how you can contribute your thoughts on the direction CSS should take.

Before you come to a conclusion, be sure to read Rachel Andrews post on the topic. It explains why the Chrome team has concerns about implementing a masonry layout as part of the CSS Grid specification and clarifies what the alternative proposal enables.

Improve your CSS knowledge

If you want to dive deeper into CSS, you’ve come to the right place – with a few social events and SmashingConfs coming up this year:

We would be delighted to welcome you to one of our special smashing experiences – online or in person!

Smashing Weekly Newsletter

With our Weekly newsletterwe would like to useful, practical information and share some of the helpful things that people in the web industry are working on. There are So There are a lot of talented people out there working on brilliant projects and we would appreciate it if you could help spread the word and give them the recognition they deserve!

Also, by subscribingthere are no third-party mailings or hidden advertising, and your support really helps us pay the bills.

Are you interested in a grant? Check out our Partnership options And Contact us You can contact the team at any time and they will get back to you promptly and as soon as possible.

[ad_2]

Source link