Some CSS CSS Tips

CSS Protips

These are modern solutions to common problems, a collection of tips that will help you improve your professional CSS skills.

From translator

Greetings, another translation of notes on CSS has been prepared for you. Matt Smith, a Portland developer, shared the CSS tips and put them on GitHub . I especially liked its selection, it is structured, not particularly cumbersome in terms of boring large texts and descriptions, and in general it will be understandable even to a beginner. I’ll be happy if we discuss each point in the comments and finally give some conclusions. So let's get started.


')

Content

1. Use the pseudo-class: not to set the navigation frame
2. Add line spacing to the body element.
3. Vertically center anything
4. Properly comma-separated list items
5. Negative sequence number in nth-child
6. We use SVG-logos
7. Axiomatic CSS
8. CSS Slider Maximum Height
9. Inherit box-sizing
10. Uniform table cell width
11. Dynamic external indents with flexbox
12. Use the empty links attribute selector.
13. Default Styles for Regular Links

Use the pseudo-class: not to set the navigation frame

Instead of setting a border like this ...

/*   */ .nav li { border-right: 1px solid #666; } 

... moreover, reset the border to the last element ...

 /*   */ .nav li:last-child { border-right: none; } 

... you could just use the pseudo-class: not (), which will help us select only the necessary elements:

 .nav li:not(:last-child) { border-right: 1px solid #666; } 

Of course, you could use such a sample .nav li + li or even .nav li: first-child ~ li , however, if we intentionally use: not (), it’s clear to us that CSS defines a border for all elements except the last, and now anyone will understand what is happening here. This method is supported in IE9 + and others.

Add line spacing to the body element.

You should not add line heights for each paragraph or heading (<p>, <h *>), respectively, defining each element. Instead, add this code to the body of the body element:

 body { line-height: 1; } 

In this way, any text elements inherit this property from the main parent body element.

Vertically center anything

No, this is not black magic, you can really center any element vertically:

 html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } 

Want to center something else? Vertically, horizontally ... somehow, somewhere? On CSS Tricks you can read the article and then you can do anything. The example has support for IE11 + and others.

Note : Keep track of the flexbox bugs in IE11 and monitor the html layout process.

Properly comma-separated list items

We can make our li elements so that they really look like a real list, whose entries are separated by commas:

 ul > li:not(:last-child)::after { content: ","; } 

Using the pseudo-class: not (), we add a comma after each ul-list element, except for the last one.

Negative sequence number in nth-child

Use negative arguments in nth-child to select items 1 through n.

 li { display: none; } /*    1  3    */ li:nth-child(-n+3) { display: block; } 

Or, now that we know everything about using the pseudo-class: not (), we can try this:

 /*    ul-,    1  3 */ li:not(:nth-child(-n+3)) { display: none; } 

Well, that was pretty easy.

We use SVG-logos

No, no reason not to use SVG:

 .logo { background: url("logo.svg"); } 

SVG scales well with any resolution and is supported in all browsers, IE9 +. Now we can use svg, instead of .png, .jpg, or .gif files.

Note : If you only have an SVG icon for a button and, if the SVG has not been loaded, you can use the available text hint:

 .no-svg .icon-only::after { content: attr(aria-label); } 

Axiomatic CSS

Lobotomized owl (axiomatic CSS), yes, this is a rather strange name, but with the help of the universal selector (*) and single-level selector (+) you can get powerful CSS features:

 * + * { margin-top: 1.5em; } 

In this example, all elements in the stream, which are located after the other element, should receive an upper indent of 1.5em. For more information about the " lobotomized owl ", read the article by Haydon Pickering, or a translation in Russian .

CSS Slider Maximum Height

You can implement a CSS slider using max-height and overflow: hidden :

 .slider ul { max-height: 0; overflow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; /*   max-height */ } 

Inherit box-sizing

Let box-sizing inherit from html:

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } 

Now it's easier for us to control box-sizing in plugins or components that use their own rules of behavior. Support in IE8 + and others.

Uniform table cell width

Sometimes, tables can cause pain in the work, so try using table-layout: fixed to use the cells of the same width:

 .calendar { table-layout: fixed; } 

We get rid of pain with table-layout . Support in IE8 + and others.

Dynamic external indents with flexbox

When working with a column layout, you can get rid of the use of css-selectors nth- * , first- * , and last-child with the help of the flexbox values ​​of space-between :

 .list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; /*      */ } 

Support for IE11 + and others.

Use the empty links attribute selector.

We display links when the a-element has no text value, but the href attribute contains a link:

 a[href^="http"]:empty::before { content: attr(href); } 

It is quite convenient. Support for IE9 + and others.

Default Styles for Regular Links

Add default style links:

 a[href]:not([class]) { color: #008000; text-decoration: underline; } 

Now the links inserted through the visual editor of your CMS, which usually do not have a class, will differ from the other links without affecting the cascade.