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
First add a border to each menu item
/* add border */ .nav li { border-right: 1px solid #666; }
...and then remove the last element...
//* remove border */
.nav li:last-child { border-right: none; }
...You can directly use the :not() pseudo-class to apply elements:
.nav li:not(:last-child) { border-right: 1px solid #666; }
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; }
You don't need to add line-height separately to each
,
body { line-height: 1; }
This way text elements can easily inherit from body .
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; }
Look, isn't it very simple?
Note: Be careful with flexbox in IE11.
Make HTML list items look like a real, comma-separated list:
ul > li:not(:last-child)::after { content: ","; }
Use the :not() pseudo-class for the last list item.
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; }
It's that easy.
for icons There is no reason not to use SVG for icons:
.logo { background: url("logo.svg"); }
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.
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; }
Note: Please use optimizeLegibility responsibly. Additionally, IE/Edge has no text-rendering support.
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; }
Let box-sizing inherit html:
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
This makes it easier to change box-sizing in plugins or other components that leverage other behaviors.
Tables are cumbersome to work with, so be sure to use table-layout: fixed to keep cells of equal width:
.calendar { table-layout: fixed; }
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%; }
List separators will now appear at evenly spaced positions.
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); }
Quite convenient.
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!