原副标题：12种化解CSS旧难题的新基本功

翻译者 | 陈峻

假如您一直在采用CSS，那么很可能会碰到一些产业布局或跨应用程序相容性等难题。比如，CSS3的式样不太适用于于IE的某些旧版。而有时，当他们准备采用某类功能时，却发现它无法广泛地得到各式各样应用程序的犯罪行为支持。因而，在从事Web合作开发的过程中，中文网站与Web应用的先期应用程序相容性试验就显得至关重要。

当然，随着Web控制技术的发展，合作开发者也正在专业委员会借助捷伊控制技术来解决各式各样旧的难题。比如，他们能借助服务器端标识符库，来强化空载中文网站的读取时间；或使得div条码极具积极响应性，而无须过多地倚赖Bootstrap。同时，CSS本身也在不断地插值中，各式各样新一代的CSS控制技术往往也能够给整个页面的设计与亮化带来意料之外的效用。

上面，我将和您探讨12种能消除CSS传统旧难题的新一代CSS控制技术。

1. CSS手写体准则和建立简洁的排印比率

排印是增强页面外形的最差方式之一。CSS正好能帮助他们合作开发出各式各样基本类型的式样。

推荐手写体基层单位（font-unit）

您韦尔恩：%、rem、em、以及px吗？当使用者在应用程序中弱化或增大时，假如您采用px来表述排印的话，它是不能按照比率执行翻转的。因而，他们需要采用的手写体基层单位应该是rem。通常，1rem的缺省为16px，当使用者在应用程序中弱化时，在rem中被表述的手写体体积会完全一致。

Em能与最相近的手写体原素的体积准则成反比。因而，它只能在您希望子元素相对于父原素保持宽度时，才会去采用它。而由于%的犯罪行为与em几乎相近，因而您完全能采用em来满足某一的体积要求。

避免文档外溢

避免文档外溢能升用的中文网站在出现罐子中的文档文本剧增时，其文本文本不能超出罐子的边界线。请参照如下表所示标识符：

拷贝

CSS

p,

li,

h1,

h2,

h3,

h4 {

// Help prevent overflow of long words/names/URLs

word-break: break-word;

}

积极响应式排印

假如您在全局范围内选择了较大的手写体体积，那么您可能会在小屏幕设备上碰到外溢的难题。为了化解这个难题，他们能采用一种流体类型，实现根据视口（viewport，即设备的屏幕上能用来显示页面的那一块区域）调整手写体的体积值，就像积极响应式图片一样。您能采用如下表所示标识符来计算最小和基本的体积：

拷贝

CSS

font-size: unquote(“min(max(#{$fluid-min}rem, #{$fluid-scaler}), #{$level-size})”);

当然，您也能采用vw（viewport width，视口宽度）来作为手写体的基层单位。

2. 高级CSS选择器

假如您计划合作开发可被用在其他页面或UI组件上的可重用CSS文件，那么能去了解CSS选择器的工作原理，比如，您能通过链接– https://www.lambdatest.com/blog/css-selectors-cheat-sheet/?utm_source=dzone&utm_medium=organic&utm_campaign=jun03_kj&utm_term=kj&utm_content=blog，来深入了解有关CSS选择器的各式各样类、ID、原素、以及一些高级的选择器。

通用选择器

通用选择器可被用于中文网站的所有原素。比如，假如您想为页面中的所有原素设置某一的边距，那么能编写如下表所示标识符：

拷贝

CSS

* {

margin: 1.5rem;

}

属性选择器

假如您想将某个某一的式样应用于具有相近属性、但类名不同的原素上，则能采用属性选择器。请参见如下表所示标识符：

拷贝

CSS

[class*=”component_”] {

border: 2px solid blue;

}

属性选择器将为类名为“component_title”和“component_label”的各式各样原素应用一个边框。

子组合器

假如您想将导航栏中菜单手写体的体积设置为粗体，而导航栏中的文本却是动态生成的，那么就能考虑采用如下表所示子组合器：

拷贝

CSS

.navigation-menu > ul > li > a {

font-weight: bold;

}

伪类（Pseudo Classes）

您一定见到过如下表所示图所示的、带有不同颜色交替行的表格吧？这往往是通过CSS的伪类来实现的：

拷贝

CSS

tbody tr:nth-child(odd) {

background-color: green;

}

上述标识符能将表格中的奇数行显示为绿色背景。

除了“奇数”或“偶数”，您还能采用“n+1”或“3n+1”等属性，将不同的属性应用于不同的行上。

3.更换旧的网格系统

一直以来，Bootstrap能帮助合作开发者在不同分辨率的设备中，均匀地分布积极响应式罐子。如下表所示标识符段所示，网格等现代化CSS控制技术为他们提供了一种简化的化解方案：

拷贝

CSS

$minColumnWidth: 10rem;

.grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));

grid-gap: 2rem;

& + .grid {

margin-top: $gridGap;

}

}

就上述标识符而言，他们首先表述了网格原素的最小宽度。在grid-template-columns中，他们采用了repeat函数，以便CSS将相同的参数应用于每一列上。由于他们用到了auto-fit而不是number，因而无论他们用到了多少列，各个列都具有相同的宽度，并且会自动拉伸或填充可用的空间。

同时，他们也能通过minmax()函数，来设置每一列的最大宽度，并将1fr作为最大值，以确保文本能填满一整列，直至达到全部可用的空间。此外，他们还能添加一个间隙和一个可选准则，进而在连续的罐子之间应用相同的值。下图展示了标识符的运行效用。

当然，美中不足，对于出现了三个以上的列时，在某些视口中，您可能会看到一个孤立的列（如下表所示图所示）。

对此，您能通过介质查询（media queries）来化解此类难题，当然您必须为多个断点编写大量的标识符。

4. 保持原素的高度一致

过去，在两个罐子的文本长度不相等时，他们会采用jQuery进行计算，使它们相对UX的高度完全一致。如今，他们能采用网格等现代CSS控制技术，来简化此过程。请参见如下表所示标识符：

拷贝

CSS

/*Parent container*/

.parent {

display: grid;

grid-auto-flow: column;

}

/*Child elements*/

.child {

height: 100%;

}

通过将网格的自动流（grid-auto-flow）切换为行或列，他们能拥有统一宽度或高度的罐子。同时，他们也能采用带有CSS flexbox的更简单标识符，来实现相同的功能。

拷贝

CSS

/*Parent elements*/

.parent {

display: flex;

/* Child elements */

.child {

height: 100%;

}

}

那么，哪一个更好呢？答案是，两者都具有同等的采用优势，都能化解等高原素的难题。不过，在flexbox中，原素的宽度可能并不相等。此时，您能采用网格来处理等宽的原素。此外，假如您想在每行中拥有最大列数，网格也能处理数学难题。而假如你采用的是flexbox，则需要为此目的表述一个计算。

5.提升使用者滚动时的简洁体验

采用带有“回到顶部”链接的粘性副标题，他们能允许使用者在中文网站的任何位置，一键回到顶部。上面，让他们来看看如何采用现代化的CSS控制技术，合作开发返回顶部的链接。首先，让他们建立相关的文本框架。

拷贝

HTML

<header id=”header”>Title</header>

<main>

<article>

<!– content goes here –>

</article>

<!– Back to Top link –>

<div class=”back-to-top-wrapper”>

<a href=”#header” class=”back-to-top-link” aria-label=”Go Back to Top”>Top</a>

</div>

</main>

接着，他们将平滑滚动添加到页面上。

拷贝

CSS

html {

scroll-behavior: smooth;

}

然后，他们将根据自己的喜好，设置返回顶部链接的式样。当然，您也能添加一个漂亮的SVG图标，而不是手动式样。

而在滚动条的犯罪行为方面，他们能表述滚动的长度：

拷贝

$scrollLength: 100vh;

之后，在包装器中，他们将滚动值设置为预表述的滚动长度：

拷贝

CSS

.back-to-top-wrapper {

position: absolute;

top: $scrollLength;

}

他们再将必要的式样添加到返回顶部的链接上。请记住采用position-sticky将其保持在某一的位置。

拷贝

CSS

.back-to-top-link {

// using fixed as fallback when `sticky` not supported

position: fixed;

position: sticky;

// achieves desired positioning within the viewport

// relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used

top: calc(100vh – 5rem);

// … other styles

}

在完成后，他们得到预期的结果。

6. 通过添加Alternate:focus来提高站点的可访问性

对于无权访问中文网站的人，他们通常会删除按钮的轮廓聚焦。不过，对于采用键盘来导航站点的人而言，他们无法检测到当前的聚焦原素（如下表所示按钮图所示）：

因而，他们往往需要添加几行CSS标识符，以提供备用的焦点式样。比如：

拷贝

CSS

button:focus {

outline: max(1px, 0.1em) solid currentColor;

outline-offset: 0.25em;

}

在此，他们将currentColor视为页面的主题颜色（此处为绿色），通过采用轮廓偏移，便能调整轮廓与原素的宽度了（请参见下图）。

7. 设计单选按钮

由于默认的HTML单选按钮在不同应用程序中有着不同的显示，因而合作开发者往往需要一个自表述式样的单选按钮。比如，下图是Mac系统上Firefox中显示的单选按钮的外形。

而下图则是Safari中的单选按钮的外形。

同时，原生的单选按钮也不能随手写体体积变化而自动翻转。因而，为了建立一个统一的单选按钮化解方案，他们能从如下表所示HTML开始：

拷贝

<label class=”radio radio-gradient”>

<span class=”radio-input”>

<input type=”radio” name=”radio”>

<span class=”radio-control”></span>

</span>

<span class=”radio-label”>Option 1</span>

</label>

<label class=”radio radio-before”>

<span class=”radio-input”>

<input type=”radio” name=”radio”>

<span class=”radio-control”></span>

</span>

<span class=”radio-label”>Option 2</span>

</label>

首先，他们将建立一个自表述的颜色变量。

拷贝

CSS

:root {

–color: green;

}

接着，他们采用通用选择器，来重置box-sizing方法。它将在计算任何原素的最终体积时，包含边框和填充。

拷贝

*,

*:before,

*:after {

box-sizing: border-box;

}

他们在条码中添加了一个.radio类，并采用grid-gap在按钮和条码之间添加了一些宽度。此外，他们也通过采用:focus-within和transform，以便当该某一选项处于焦点时，条码的体积能随之增大。

拷贝

CSS

.radio {

display: grid;

grid-template-columns: min-content auto;

grid-gap: 0.5em;

font-size: 2.25rem;

color: var(–color);

&:focus-within {

.radio-label {

transform: scale(1.05);

opacity: 1;

}

}

}

接着，他们会调整行高，添加过渡，并在选项位的聚焦时，降低条码的不透明度。

拷贝

CSS

.radio-label {

line-height: 1;

transition: 180ms all ease-in-out;

opacity: 0.8;

}

我们通过添加一个display-flex，以为各式各样包装自表述控件和原生的输入按钮。

他们还将在focused stage上采用双框阴影，并确保基本按钮和focused stage之间的错位。

拷贝

CSS

.radio-input {

display: flex;

input {

opacity: 0;

width: 0;

height: 0;

&:focus + .radio-control {

box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;

}

}

}

当按钮处于选中stage时，他们添加如下表所示式样：

拷贝

CSS

.radio-gradient input:checked + .radio-control {

background: radial-gradient(currentcolor 50%, rgba(255, 0, 0, 0) 51%);

}

接着，他们建立:before原素，以在未被选中时给按钮设置动画。

拷贝

CSS

.radio-before {

.radio-control {

display: grid;

place-items: center;

}

input + .radio-control::before {

content: “”;

width: 0.5em;

height: 0.5em;

box-shadow: inset 0.5em 0.5em currentColor;

border-radius: 50%;

transition: 180ms transform ease-in-out;

transform: scale(0);

}

input:checked + .radio-control::before {

transform: scale(1);

}

}

最后，他们将式样添加到单选按钮和页面的body中。

拷贝

CSS

.radio-control {

display: block;

width: 1em;

height: 1em;

border-radius: 50%;

border: 0.1em solid currentColor;

transform: translateY(-0.05em);

}

body {

min-height: 100vh;

display: grid;

place-content: center;

grid-gap: 2rem;

padding: 1rem;

}

下图为输出结果。

8.保持页脚的底部位置

虽然在单页应用程序中比较少见，但假如您正在建立一个静态页面，那么很可能会碰到页脚浮动的难题。对此，他们有如下表所示两种方法：

网格

让他们先来看上面一段标识符：

拷贝

CSS

body {

min-height: 100vh;

display: grid;

grid-template-rows: auto 1fr auto;

}

在此，他们保持了页面体（body）的最小高度。先期，他们会采用grid-template-rows来正确地分隔文本。该方法会采用一个小数单元，来计算可用的空间，并将其分配到多个行上。在此基础上，它将填充在页眉和页脚之间的所有可用空间。

Flexbox

采用flexbox的方法会更加简单，请参见如下表所示标识符：

拷贝

CSS

body {

min-height: 100vh;

display: flex;

flex-direction: column;

}

首先，通过min-height，他们能确保body伸展到屏幕的完全高度。然后，他们设置flex-direction，以保留堆叠的块原素，以及文档犯罪行为的正常。

9. 动画图像

有了CSS，他们往往只需几行标识符，便可借助jQuery和position:absolute，来实现在鼠标悬停在图像上时，触发动画的效用。请参见如下表所示标识符：

拷贝

CSS

.image-caption {

// … existing styles

transition: transform 500ms ease-in;

will-change: transform;

}

The transition property helps to animate the caption. We can trigger the animation on hover using –

.image:hover {

.image-caption {

transform: translateY(0);

}

}

该标识符段化解了鼠标悬停的难题。但是，假如有人采用键盘浏览页面又怎么办呢？此时，他们能采用焦点，而非悬停。请参见如下表所示标识符：

拷贝

CSS

.image:focus {

outline: none;

}

.image:hover,

.image:focus {

.image-caption {

transform: translateY(0);

}

10.边界线半径和盒子阴影的高级采用

得益于CSS3的border-radius属性，合作开发者不必再为圆角罐子建立圆角盒子了。请参见如下表所示标识符：

拷贝

>border-radius: 20% 50%;

您一定觉得该形状十分奇怪，毕竟这只是为了演示边界线半径。假如应用这些计算出的数值，您便能为罐子提供所需的任何形状。比如：

拷贝

border-radius: 3vw 4vw 8vw 2vw;

您能采用相对于原素当前体积的百分比值。也就是说，假如您想完全一致性，那么诸如vw（视口宽度）之类的相对基层单位则十分实用。它们能在移动设备上看起来更小，而在桌面端上看起来更大，这便保持了一致性。

而box-shadow是另一种能为使用者带来良好页面观感的属性。通常，他们会采用盒子阴影，来为卡片或按钮等原素添加高度的提示。比如：

拷贝

box-shadow:3px 4px 5px 0px rgba(0, 0, 0, 0.38);

在此，他们设置了3px的水平偏移、4px的垂直偏移、5px的模糊半径、以及无扩散的半径和灰色阴影。您也能根据自己的需求进行微调，以增强文档框的观感。

此外，box-shadow的另一个独特功能是，您能添加多个图层。比如：

拷贝

box-shadow: 2px 4px 0 4px yellowgreen, 4px 8px 0 8px yellow, 8px 10px 0 12px red;

同时，他们还能采用box-shadow，为图像添加嵌入采用晕影的效用。比如：

拷贝

CSS

.image-container {

width: 30vmin;

height: 30vmin;

box-shadow: inset 0 0 4vmin 3vmin rgba(0, 0, 0, 0.5);

}

11.保持原素居中

过去，假如他们需要将原素保持在页面的中心，则必须采用绝对位置，并表述左、右、顶和底部的值。如今的CSS控制技术为他们提供了一种简单的方式，实现在多种分辨率下保持原素的居中位置。

具体而言，为了使某个原素能水平和垂直居中，他们只需向该原素添加如下表所示两个属性：

拷贝

CSS

display: grid;

place-content: center;

假如您想采用flexbox来保持页面上不同flexbox原素之间的一致性，那么您将需要额外的一行：

拷贝

CSS

display: flex;

align-items: center;

justify-content: center;

假如您想将某个原素设置为以某个某一的轴中心对齐的话，就必须删除display属性。比如，对于垂直居中对齐的需求，您能编写为：

拷贝

CSS

align-content:center;

其结果显示如下表所示：

另一方面，为了保持原素的水平居中，而不是文本对齐，您能采用justify-content：

拷贝

CSS

justify-content:center;

上面提到的化解方案是针对网格原素的。对于flex原素，标识符会略有不同。比如，对于垂直对齐需求，您能编写为：

拷贝

CSS

justify-content: center;

flex-direction: column;

For horizontal alignment, you will need –

justify-content: center;

12.采用CSS绘制形状

现代化CSS控制技术使他们避免了采用脚本来绘制对象的麻烦。目前，他们有多种实用的方法来建立基本的CSS形状。上面，让他们来了解一下如何建立CSS三角形。

采用边框

他们能采用边框属性来建立三角形。让他们先从罐子开始。

拷贝

CSS

.triangle {

border-style: solid;

border-color: transparent;

}

在上面标识符中，他们采用了border-width属性，并为其边框的左侧赋予了颜色。

拷贝

CSS

.triangle {

border-style: solid;

border-color: transparent;

/* top | right | bottom | left */

border-width: 7px 0 7px 10px;

border-left-color: blue;

}

其结果显示如下表所示：

他们能通过打乱border-width的左、右、顶和底部值，来改变三角形的方向。

采用线性梯度（linear-gradient）

他们能将linear-gradient与background-image的属性一起采用。

首先，他们会建立一个罐子，给出其体积，并避免背景重复（background-repeat）。

拷贝

CSS

.triangle {

width: 8em;

height: 10em;

background-repeat: no-repeat;

}

接着，他们通过添加渐变，将罐子的一半呈现蓝色。在添加了两个渐变之后，罐子中出现一个镜像的三角形。

拷贝

background-image: linear-gradient(32deg, blue 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, blue 50%, rgba(255, 255, 255, 0) 50%);

为了让他们的盒子看起来像一个正常的三角形，他们需要更改背景的体积，即保持100%的宽度，但只有一半的高度：

拷贝

Background-size: 100% 50%;

最后，由于两个渐变的默认位置都是0 0，为了避免出现重叠，他们必须添加和指定背景的位置：

拷贝

Background-position: top left, bottom left;

至此，他们的形状就看起来像三角形了。当然，该方法也存在一个缺点–形状没有积极响应能力。假如比率发生了变化，他们则需要重新计算。

小结

目前，CSS控制技术仍在持续快速发展与插值中。合作开发者正在努力通过建立纯CSS库，以减少对于脚本的倚赖，并减小中文网站的体量，使其对SEO更加友好。希望上述介绍的CSS新基本功，能协助您化解在实际应用中碰到的、有关CSS脚本倚赖性的常见旧难题。

翻译者介绍

陈峻 （Julian Chen），51CTO社区编辑，具有十多年的IT项目实施经验，善于对内外部资源与风险实施管控，专注传播网络与信息安全知识与经验；持续以博文、专题和译文等形式，分享前沿控制技术与新知；经常以线上、线下等方式，开展信息安全类培训与授课。

原文副标题：12 Modern CSS TechniquesFor Older CSS Problems，作者：Arnab Roy返回