Share 12 awesome CSS skills

高洛峰
Release: 2017-03-21 17:36:56
Original
1436 people have browsed it

The following CSS advanced skills

  • Use :not() to apply/unapply borders on menu

  • Add line height to body

  • Everything is centered vertically

  • Comma separated list

  • Use negative nth-child to select items

  • Use SVG

  • for icons Optimize display text

  • For pure CSS sliders use max-height

  • Inheritance box-sizing

  • TableUniform width of cells

  • Use Flexbox to get rid of various hacks of margins

  • Use attribute selector for empty link

Use :not() to apply/unapply borders on menu

First add a border to each menu item

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

...and then remove the last element...

//* remove border */

.nav li:last-child {
  border-right: none;
}
Copy after login

...You can directly use the :not() pseudo-class to apply elements:

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

This way the code is clean, readable, and easy to understand.

Of course, if your new element has sibling elements, you can also use the universal sibling selector (~):

..nav li:first-child ~ li {

  border-left: 1px solid #666;
}
Copy after login

Add line height to body

You don't need to add line-height separately to each

, , etc. Just add it to body:

body {
  line-height: 1;
}
Copy after login

This way text elements can easily inherit from body .

Everything is centered vertically

To center all elements vertically, it's too easy:

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}
Copy after login

Look, isn't it very simple?

Note: Be careful with flexbox in IE11.

Comma separated list

Make HTML list items look like a real, comma-separated list:

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

Use the :not() pseudo-class for the last list item.

Use negative nth-child to select items

Use negative nth-child in CSS to select item 1 to item n.

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}
Copy after login

It's that easy.

Use SVG

for icons There is no reason not to use SVG for icons:

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

SVG has good scalability for all resolution types and supports all browsers returning to IE9. This way you can avoid .png, .jpg or .gif files.

Optimize display text

Sometimes fonts don't display optimally on all devices, so let your device browser help you:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
Copy after login

Note: Please use optimizeLegibility responsibly. Additionally, IE/Edge has no text-rendering support.

Use max-height

for pure CSS sliders Use max-height and overflow hiding to implement a CSS-only slider:

.slider ul {
  max-height: 0;
  overlow: hidden;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}
Copy after login

Inherit box-sizing

Let box-sizing inherit html:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
Copy after login

This makes it easier to change box-sizing in plugins or other components that leverage other behaviors.

Table cells are of equal width

Tables are cumbersome to work with, so be sure to use table-layout: fixed to keep cells of equal width:

.calendar {
  table-layout: fixed;
}
Copy after login

Various hacks to get rid of margins using Flexbox

When you need to use column separators, you can get rid of the nth-, first-, and last-child hacks through flexbox's space-between property:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}
Copy after login

List separators will now appear at evenly spaced positions.

Use attribute selector for empty links

Display the link when the element has no text value but the href attribute has a link:

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

Quite convenient.

support

These advanced techniques work effectively in current versions of Chrome, Firefox, Safari, and Edge, as well as IE11.

The above is the detailed content of Share 12 awesome CSS skills. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template