Protips

light bulb icon

CSS Protips Awesome

一系列技巧帮助您掌握CSS技能.

>有关其他很棒的清单,请查看 @sindresorhus的精选清单 awesome lists.

Protips

Use a CSS Reset

CSS重置使用干净的样式元素来帮助在不同浏览器之间实现样式一致性. 您可以使用CSS重置库,例如 Normalize,或者您可以使用更简化的重置方法:

*,
*::before,
* :: {之后
  框大小:border-box;
  边距:0;
  填充:0;
}

现在,将去除元素的边距和内边距,“ box-sizing”可让您使用CSS box模型管理布局.

Demo

注意:如果您遵循 Inherit box-sizing 在下面的提示中,您可能会选择在CSS重置中不包含box-sizing属性.

back to table of contents

Inherit box-sizing

box-sizing继承自html

html {
  框大小:border-box;
}

*,
*::before,
* :: {之后
  大小调整:继承;
}

这使得在利用其他行为的插件或其他组件中更改“ box-sizing”更加容易.

back to table of contents

Use unset Instead of Resetting All Properties

重置元素的属性时,不必重置每个单独的属性:

按钮{
  背景:无;
  边界:无;
  颜色:继承;
  font:继承;
  大纲:无;
  填充:0;
}

您可以使用all速记来指定元素的所有属性. 将值设置为unset会将元素的属性更改为其初始值:

按钮{
  全部:未设置;
}

注意: IE11不支持all速记,并且Edge正在考虑支持该速记. IE11不支持unset.

back to table of contents

Use :not() to Apply/Unapply Borders on Navigation

而不是放下边界...

/ *添加边框* /
.nav on {
  border-right: 1px solid #666;
}

...然后将其从最后一个元素中移除...

/ *删除边框* /
.nav lilast-child {
  右边框:无;
}

...使用:not()伪类仅适用于您想要的元素:

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

在这里,CSS选择器被理解为人类会描述它的方式.

Demo

back to table of contents

Add line-height to body

您不需要在每个中添加line-height<p><h*>,等. 分别. 而是将其添加到body中:

身体 {
  行高:1.5;
}

这样,文本元素可以轻松地从body继承.

Demo

back to table of contents

Set :focus for Form Elements

视觉键盘用户依靠焦点来确定键盘事件在页面中的位置. 将表单元素的焦点突出并与浏览器的默认实现保持一致:

a:focus,
button:focus,
input:focus,
select:focus,
textareafocus {
  盒子阴影:无;
  outline: #000 dotted 2px;
  轮廓偏移:.05em;
}

Demo

back to table of contents

Vertically-Center Anything

不,这不是黑魔法,您实际上可以使元素垂直居中. 您可以使用flexbox做到这一点...

html,
身体 {
  高度:100%;
  边距:0;
}

身体 {
  -webkit-align-items:center;
  -ms-flex-align:居中;
  align-items:居中;
  显示:-webkit-flex;
  显示:flex;
}

...以及CSS Grid:

身体 {
  显示:网格;
  高度:100vh;
  边距:0;
  地方项目:中心中心;
}

想以其他为中心吗? 垂直,水平...什么都可以,随时随地? CSS技巧有 a nice write-up 在做所有这些.

注意:注意一些 buggy behavior 在IE11中使用flexbox.

Demo

back to table of contents

Comma-Separated Lists

使列表项看起来像真实的逗号分隔列表:

ul&gt; linot(:last-child:: after {
  内容:“,”;
}

使用:not()伪类,不会在最后一项添加逗号.

back to table of contents

Select Items Using Negative nth-child

在CSS中使用否定的nth-child来选择项1到n.

li {
  显示:无;
}

/ *选择项目1至3并显示它们* /
li第n个孩子-n + 3{
  显示:块;
}

或者,因为您已经学到了一些 using :not(),请尝试:

/ *选择前三个项目以外的所有项目并显示它们* /
linot(:nth-​​child-n + 3)){
  显示:块;
}

Demo

back to table of contents

Use SVG for Icons

没有理由不对图标使用SVG:

.商标 {
  背景:url(“ logo.svg”);
}

SVG适用于所有分辨率类型,并且在所有浏览器中均受支持 back to IE9 . 抛弃您的.png,.jpg或.gif-jif-whatev文件.

注意:如果您为有视力的用户提供仅SVG图标的按钮,而SVG无法加载,则有助于维护可访问性:

.no-svg .icon-only ::之后{
  内容:attr(aria-label);
}

back to table of contents

Use the "Lobotomized Owl" Selector

它可能有一个奇怪的名称,但是将通用选择器(*)与相邻的兄弟选择器(+)结合使用可以提供强大的CSS功能:

* + * {
  上边距:1.5em;
}

在此示例中,文档流中所有其他元素之后的所有元素都将收到“ margin-top:1.5em”.

有关“圆角猫头鹰”选择器的更多信息,请阅读 Heydon Pickering's post A List Apart 上.

Demo

back to table of contents

Use max-height for Pure CSS Sliders

使用max-height实现仅CSS滑块,隐藏溢出:

.slider {
  max-height:200像素;
  溢出-y:隐藏;
  宽度:300像素;
}

.sliderhover {
  最大高度:600px;
  溢出y:滚动;
}

该元素在悬停时扩展为“ max-height”值,并且由于溢出而显示滑块.

back to table of contents

Equal-Width Table Cells

使用表格可能会很痛苦. 尝试使用“ table-layout:fixed”将单元保持相等的宽度:

.calendar {
  表格布局:固定;
}

无痛的桌子布局.

Demo

back to table of contents

Get Rid of Margin Hacks With Flexbox

使用列装订线时,可以通过使用flexbox的space-between属性来摆脱nth,first和last-child黑客:

.list {
  显示:flex;
  证明内容:间隔;
}

.list .person {
  弹性基础:23%;
}

现在,列装订线始终显示为均匀间隔.

back to table of contents

<a>元素没有文本值,但href属性具有链接时,显示链接

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

那很方便.

Demo

back to table of contents

为“默认”链接添加样式:

a [href]not[class]{
  color: #008000;
  文字装饰:下划线;
}

现在,通过CMS插入的链接通常不具有“ class”属性,它们之间将具有区别,而不会普遍影响级联.

back to table of contents

Consistent Vertical Rhythm

在元素中使用通用选择器(*)创建一致的垂直节奏:

.intro&gt; * {
  底边:1.25rem;
}

一致的垂直节奏可提供视觉美感,使内容更具可读性.

back to table of contents

Intrinsic Ratio Boxes

要创建具有内在比率的框,您需要做的就是对div应用顶部或底部填充:

.容器 {
  高度:0;
  底部填充:20%;
  职位:相对
}

.container div {
  border: 2px dashed #ddd;
  高度:100%;
  左:0;
  位置:绝对;
  最高:0;
  宽度:100%;
}

使用20%的填充使框的高度等于其宽度的20%. 无论视口的宽度如何,子div都将保持其宽高比(100%/ 20%= 5:1).

Demo

back to table of contents

Style Broken Images

一点点CSS就能使破碎的图像更加美观.

img {
  显示:块;
  字体家族:sans-serif;
  字体粗细:300;
  高度:自动;
  行高:2;
  职位:相对
  文本对齐:居中;
  宽度:100%;
}

现在添加伪元素规则以显示用户消息和损坏图像的URL参考:

img ::之前{
  内容:“很抱歉,下面的图像已损坏:(”;
  显示:块;
  底边距:10px;
}

img ::之后{
  内容:“(URL:” attr(src)“)”;
  显示:块;
  font-size:12px;
}

在中了解有关此样式的样式的更多信息 Ire Aderinokun's original post.

back to table of contents

Use rem for Global Sizing; Use em for Local Sizing

在根目录上设置基本字体大小(“ html {font-size:100%;}”)后,将文本元素的字体大小设置为“ em”:

h2 {
  字号:2em;
}

p {
  字体大小:1em;
}

然后将模块的字体大小设置为rem

文章{
  font-size:1.25rem;
}

除了.module {
  font-size:.9rem;
}

现在,每个模块都被分隔开了,更易于样式设计,更易于维护和灵活.

back to table of contents

Hide Autoplay Videos That Aren't Muted

对于自定义用户样式表而言,这是一个绝妙的技巧. 避免使用户在加载页面时从视频中自动播放的视频中过载. 如果声音没有被静音,请不要显示视频:

video [autoplay]not[muted]{
  显示:无;
}

再一次,我们利用了 :not() 伪类.

back to table of contents

Use :root for Flexible Type

响应式布局中的字体大小应能够随每个视口调整. 您可以使用:root根据视口的高度和宽度来计算字体大小:

 {
  字体大小:calc(1vw + 1vh + .5vmin);
}

现在您可以根据:root计算出的值来利用root em单位:

身体 {
  做:1雷姆/ 1.6无衬线;
}

Demo

back to table of contents

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

为了避免移动浏览器(iOS Safari等)在出现“