本文为github中css-protips的学习笔记，仅供个人学习总结。地址 https://github.com/AllThingsSmitty/css-protips#use-a-css-reset

• 继承box-sizing。
  因为浏览器默认的box-sizing会有不同，所以需要有一个基本的定义。

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

• 使用unset替代重置所有属性
  initial 修改所有元素属性或父元素的值为其初始化值
  inherit 修改所有元素属性或父元素的值为其父元素的值
  unset 修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

not 应用/不应用border
use the :not pseudo-class to only apply to the elements you want.

• 使用 :not 伪类应用到你选中的元素。

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

Add line-height to body
You don’t need to add line-height to each 段落标签等，Instead,add it to body.

不需要给每个p,或者标题元素增加行高。只需要添加至body中。

body{
 line-height: 1.5;
}
set :focus for form Elements
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}
vertically-Center Anything 
body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

• 逗号分隔列表
  使列表看起来就像是用逗号分隔的。

ul > li:not(:last-child)::after{
  content: ',';
}
通过负nth-child选中Items
li{
    display: none;
}
 
/* select items 1 through 3 and display them*/
li:nth-child(-n+3){
    display: block;
}
 
/* also can using :not() */
li:not(:nth-child(-n+3)){
    display: block;
}

不得不说，这招确实很赞啊，之前从来没有意识到可以这么写。

• use svg for Icons
  If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:

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

• use the ‘Lobotomized Owl’ selector 使用迟钝的猫头鹰选择器
  It may have a strange name but using the universal selector(*) with the adjaent sibling selector(+) can provide a powerful CSS capability.

或者你觉得这个称呼很奇怪。但是把通用选择器*和相邻兄弟选择器+一起使用提高css性能。

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

DEMO https://codepen.io/AllThingsSmitty/pen/grRvWq

More about the Lobotomized Owl selector : https://alistapart.com/article/axiomatic-css-and-lobotomized-owls

• Use max-height for pure css slider 使用max-height完成纯CCS滑块

.slider{
  max-height: 200px;
  overflow-y : hidden;
  width: 300px;
}
 
.slider:hover{
  max-height: 600px;
  overflow-y: scroll;
}

• Equal-width Table Cells 单元格宽度相等
  table-layout:fixed to keep cells at equal width

.calendar{
 table-layout: fixed;
}
Get Rid of Margin Hacks With Flexbox  这个没懂啊~
.list {
  display: flex;
  justify-content: space-between;
}
 
.list .person {
  flex-basis: 23%;
}

• Use Attribute Selectors with Empty Links
  Display links when the a element has no text value but the href attribute has a link;

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

• Style ‘Default’ Links
  当一些标签没有默认样式的时候，可为其设置默认样式。

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

• Style Broken Images
  make broken image ore aesthetically-pleasing with a litter bit of css

img{
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Now add pseudo-elements rules to display a user message and URL reference of the broken image:

img::before{
  content:'';
  display: block;
  margin-bottom: 10px;
}
 
img::after{
  content:"url：'attr(src)')";
  display: block;
  font-size: 12px;
}
Use rem for Global Sizing;Use em for Local Sizing
h2{
  font-size: 2em;
}
p{
 font-size: 1em;
}
 
article{
 font-size: 1.25rem;
}
aside .module{
  font-size: .9rem;
}

• Hide Autoplay Video That Aren’t Muted
  this is a great trick for a custom user stylesheet.Aviod overloading a user with sound from a video that autoplay when the page is loaded.If the sound isn’t muted,don’t show the video ;

video[autoplay]:not([muted]){
    display: none;
}

哈哈哈，这个小技巧我也是很喜欢啊。

• Set font-size on Form Elements for a Better Mobile Experience

input[type="text"],
input[type="number"],
select,
textarea{
    font-size: 16px;
}

• Use Pointer Events to control Mouse Events
  Pointer events allow you to specift how the mouse interact with the element it’s touching.
  To disable the default pointer event on a button ,for instance:

点击事件允许你指定鼠标点击元素时的交互行为。

.button-disabled{
  opacity: .5;
  pointer-events: none;
}

这个小技巧很有用。我之前都是通过输入值不合格然后return.没有想过这么做。

pointer-events属性有很多可以使用的属性值，但大部分都是针对SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化：

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */
 
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

第二次修改时间： 2019.2.15 11:47

作者：lianghaihsia
来源：CSDN
原文：https://blog.csdn.net/lianghaihsia/article/details/87274720
版权声明：本文为博主原创文章，转载请附上博文链接！