如果您一直在使用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脚本依赖性的常见旧问题。