Protips

light bulb icon

CSS Protips ¶

一系列技巧可帮助您提高 CSS 技能.

> 如需其他精彩列表，请查看 @sindresorhus的精选清单 awesome lists.

Contribution Guidelines

Protips¶

Use a CSS Reset¶

CSS 重置有助于在不同浏览器之间强制执行样式一致性，并为样式元素提供干净的状态. 您可以使用 CSS 重置库，例如 Normalize，et al.，或者您可以使用更简化的重置方法：

*,
*::before,
*：：后 {
  框大小：边框框；
  保证金：0；
  填充：0；
}

现在，元素将被去除边距和填充，并且“box-sizing”可让您使用 CSS 盒模型管理布局.

Demo ¶

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

^{back to table of contents}

Inherit `box-sizing`¶

让 box-sizing 继承自 html：

html{
  框大小：边框框；
}

*,
*::before,
*：：后 {
  盒子大小：继承；
}

这使得在插件或利用其他行为的其他组件中更改“盒子大小”变得更容易.

Demo ¶

^{back to table of contents}

Use `unset` Instead of Resetting All Properties¶

重置元素的属性时，无需重置每个单独的属性：

按钮 {
  背景：无；
  边框：无；
  颜色：继承；
  字体：继承；
  概要：无；
  填充：0；
}

您可以使用“all”简写来指定元素的所有属性. 将值设置为“unset”会将元素的属性更改为其初始值：

按钮 {
  全部：未设置；
}

注意： IE11 不支持 all 和 unset 简写.

^{back to table of contents}

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

而不是把边界...

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

...然后把它从最后一个元素上取下来...

/* 去除边框 */
.nav li:最后一个子项 {
  右边界：无；
}

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

.nav li:not(:最后一个孩子) {
  border-right: 1px solid #666;
}

在这里，CSS 选择器被解读为人类对它的描述.

Demo ¶

^{back to table of contents}

Check If Font Is Installed Locally¶

您可以在远程获取字体之前检查本地是否安装了字体，这也是一个很好的性能提示.

@font-face {
  字体系列：“Dank Mono”；
  源代码：
    /* 全名 */
    本地（“丹克单声道”），
    /* 后记名称 */
    本地（“丹克单声道”），
     /* 否则，下载它！  */
    url(&quot;//...a.server/fonts/DankMono.woff&quot;);
}

代码 {
  字体系列：“Dank Mono”，system-ui-monospace；
}

感谢 Adam Argyle 分享此专业提示并 demo.

^{back to table of contents}

Add `line-height` to `body`¶

您不需要为每个添加line-height<p>,<h*>，et al. 分别地. 相反，将其添加到“body”中：

身体 {
  行高：1.5；
}

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

Demo ¶

^{back to table of contents}

Set `:focus` for Form Elements¶

有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置. 使表单元素的焦点比浏览器的默认实现更加突出和一致：

a:focus,
button:focus,
input:focus,
select:focus,
文本区域：焦点{
  盒子阴影：无；
  outline: #000 dotted 2px;
  轮廓偏移：0.05em；
}

Demo ¶

^{back to table of contents}

Vertically-Center Anything¶

不，这不是黑魔法，你确实可以将元素垂直居中. 你可以用 Flexbox 来做到这一点......

html,
身体 {
  高度：100%；
  保证金：0；
}

身体 {
  -webkit-align-items：居中；
  -ms-flex-align：居中；
  对齐项目：居中；
  显示：-webkit-flex；
  显示：柔性；
}

...还有 CSS 网格：

身体 {
  显示：网格；
  高度：100vh；
  保证金：0；
  地点项目：中心中心；
}

想要集中其他东西吗？垂直、水平……任何时间、任何地点？ CSS-Tricks 有 a nice write-up 做这一切.

注意： 注意一些 buggy behavior 在 IE11 中使用 Flexbox.

Demo ¶

^{back to table of contents}

Comma-Separated Lists¶

使列表项看起来像一个真实的、以逗号分隔的列表：

ul &gt; li:not(:last-child)::after {
  内容： ”，”;
}

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

^{back to table of contents}

Select Items Using Negative `nth-child`¶

在 CSS 中使用负数“nth-child”来选择项目 1 到 n.

那 {
  显示：无；
}

/* 选择项目 1 到 3 并显示它们 */
li:第n个孩子(-n+3) {
  显示：块；
}

或者，既然你已经了解了一些 using :not()，尝试：

/* 选择除前 3 项之外的所有项并显示它们 */
li:not(:第n个孩子(-n+3)) {
  显示：块；
}

Demo ¶

^{back to table of contents}

Use SVG for Icons¶

没有理由不使用 SVG 来制作图标：

.标识 {
  背景： url(&quot;logo.svg&quot;);
}

SVG 可以很好地适应所有分辨率类型，并且在所有浏览器中都受支持 back to IE9 . 放弃 .png、.jpg 或 .gif-jif-whatev 文件.

Note: 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 {
  内容：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 滑块：

.滑块{
  最大高度：200px；
  溢出-y：隐藏；
  宽度：300px；
}

.slider:悬停{
  最大高度：600px；
  溢出-y：滚动；
}

元素在悬停时扩展到“最大高度”值，并且滑块由于溢出而显示.

^{back to table of contents}

Equal-Width Table Cells¶

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

.日历 {
  表格布局：固定；
}

无痛的表格布局.

Demo ¶

^{back to table of contents}

Get Rid of Margin Hacks With Flexbox¶

使用列装订线时，您可以通过使用 Flexbox 的“space- Between”属性来摆脱“nth-”、“first-”和“last-child”黑客行为：

.列表 {
  显示：柔性；
  justify-content：空间之间；
}

.列表.人{
  弹性基础：23%；
}

现在，列装订线总是显示均匀间隔.

^{back to table of contents}

Use Attribute Selectors with Empty Links¶

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

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

那是相当方便的.

Demo ¶

^{back to table of contents}

Style "Default" Links¶

添加“默认”链接的样式：

a[href]:not([class]) {
  color: #008000;
  文本装饰：下划线；
}

现在，通过 CMS 插入的链接（通常没有“class”属性）将具有区别，而不会普遍影响级联.

^{back to table of contents}

Intrinsic Ratio Boxes¶

要创建具有固有比例的框，您所需要做的就是将顶部或底部填充应用于 div：

.容器 {
  高度：0；
  底部填充：20%；
  位置：相对；
}

.容器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 让破碎的图像更加美观：

图像{
  显示：块；
  字体系列：无衬线字体；
  字体粗细：300；
  高度：自动；
  行高：2；
  位置：相对；
  文本对齐：居中；
  宽度：100%；
}

现在添加伪元素规则来显示用户消息和损坏图像的 URL 引用：

img::之前{
  content: &quot;很抱歉，下面的图片已损坏:(&quot;;
  显示：块；
  底部边距：10px；
}

图像::之后{
  内容：“（url：“attr（src）”）”；
  显示：块；
  字体大小：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”：

文章 {
  字体大小：1.25rem；
}

放在一边.module {
  字体大小：.9rem；
}

现在，每个模块都变得分区化，更容易设计样式、更易于维护且更灵活.

^{back to table of contents}

Hide Autoplay Videos That Aren't Muted¶

对于自定义用户样式表来说，这是一个很棒的技巧. 避免页面加载时自动播放的视频声音给用户造成负担. 如果声音未静音，则不显示视频：

视频[自动播放]:not([静音]) {
  显示：无；
}

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

^{back to table of contents}

Use `:root` for Flexible Type¶

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

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

现在您可以根据 :root 计算的值使用 root em 单位：

身体 {
  字体：1rem/1.6 无衬线；
}

Demo ¶

^{back to table of contents}

Inherit `font` on Form Elements for a Better Mobile Experience¶

默认情况下，某些表单控件不继承印刷样式. 避免移动浏览器（iOS Safari 等）在“”时放大 HTML 表单元素

Protips

CSS Protips ¶

Protips¶

Use a CSS Reset¶

Inherit box-sizing¶

Use unset Instead of Resetting All Properties¶

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

Check If Font Is Installed Locally¶

Add line-height to body¶

Set :focus for Form Elements¶

Vertically-Center Anything¶

Comma-Separated Lists¶

Select Items Using Negative nth-child¶

Use SVG for Icons¶

Use the "Lobotomized Owl" Selector¶

Use max-height for Pure CSS Sliders¶

Equal-Width Table Cells¶

Get Rid of Margin Hacks With Flexbox¶

Use Attribute Selectors with Empty Links¶

Style "Default" Links¶

Intrinsic Ratio Boxes¶

Style Broken Images¶

Use rem for Global Sizing; Use em for Local Sizing¶

Hide Autoplay Videos That Aren't Muted¶

Use :root for Flexible Type¶

Inherit font on Form Elements for a Better Mobile Experience¶

Inherit `box-sizing`¶

Use `unset` Instead of Resetting All Properties¶

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

Add `line-height` to `body`¶

Set `:focus` for Form Elements¶

Select Items Using Negative `nth-child`¶

Use `max-height` for Pure CSS Sliders¶

Use `rem` for Global Sizing; Use `em` for Local Sizing¶

Use `:root` for Flexible Type¶

Inherit `font` on Form Elements for a Better Mobile Experience¶