Logo

菜单

发布于 2026-01-06 9 阅读
0

解决旧式 CSS 问题的 12 种现代 CSS 技术

解决旧式 CSS 问题的 12 种现代 CSS 技术

探索现代 CSS 技术是提升整体网页设计流程的最佳途径之一。如果您一直在使用 CSS，可能遇到过一些布局或跨浏览器兼容性问题。例如，CSS3 样式无法在旧版本的 Internet Explorer 中正常工作。此外，我们经常会遇到想要使用某个功能却发现它不受支持或在不同浏览器中表现不同的情况。因此，在进行 Web 开发技术时，对网站和 Web 应用程序进行浏览器兼容性测试也至关重要。

然而，随着 Web 技术的不断发展，开发者们也在努力寻找应对其他问题的方法。例如，利用其他库来优化高负载网站的加载速度，或者在不过多依赖 Bootstrap 的情况下使 div 标签更具响应性。面对不断演变和日益增多的挑战，CSS 也随之发展演变。

在本高级 CSS 教程中，我们将讨论 12 种现代 CSS 技术，以克服 CSS 中存在的一些老问题。

让我们从现代 CSS 技术开始吧！

刚接触CSS选择器？看看这份终极CSS选择器速查表，助你提升网页设计技能。

1. 高级 CSS 选择器

如果您计划开发一个可重用的 CSS 文件，以便用于其他页面或 UI 组件，那么理解 CSS 选择器的工作原理至关重要。如果您正在寻找能够提供关于 CSS 选择器深入信息的宝贵资源，不妨查看《终极 CSS 选择器速查表》。

你可能已经熟悉基于类、ID 和元素的元素选择器。让我们来看看一些高级选择器。

您好，您是否正在寻找Next.js 测试解决方案？这是一个可随您的业务规模扩展而扩展的自动化测试云平台。在最可靠的自动化测试云平台上，大规模运行 Next.js 网站的自动化测试。

通用选择器

通用选择器可用于网站的所有元素。例如，如果您想为页面中的所有元素设置特定的边距，则需要编写以下代码：

* {
  margin: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

属性选择器

如果想对具有相似属性但类名不同的某些元素应用特定样式，该怎么办？可以使用属性选择器。

[class*="component_"] {
  border: 2px solid blue;
}
Enter fullscreen mode Exit fullscreen mode

属性选择器将为类名为“component_title”和“component_label”的元素添加边框。

子组合器

如果想将导航栏菜单的字体加粗，但导航内容是动态生成的，该怎么办？它们没有特定的类。你可以使用子元素组合器。

.navigation-menu > ul > li > a {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

伪类

你见过隔行颜色不同的表格吗？想知道如何用几行 CSS 代码实现吗？答案是伪类。让我们来看看代码。

tbody tr:nth-child(odd) {
  background-color: green;
}
Enter fullscreen mode Exit fullscreen mode

它会将表格中的奇数行背景设置为绿色。

除了“奇数”或“偶数”之外，您还可以使用“n+1”或“3n+1”等属性，将不同的属性应用于不同的行。

2. 更换旧式电网系统

Bootstrap Grid 最初对开发者来说非常有用。它解决了在不同分辨率的设备上实现均匀分布的响应式容器的问题。但随着时间的推移，开发者需要一种替代方案。我们不再需要仅仅为了实现网格布局而使用一个庞大的库。

现代CSS技术，例如网格布局，为我们提供了一种更简化的解决方案。让我们一起来看看它是如何实现的。

$minColumnWidth: 10rem;
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  grid-gap: 2rem;

& + .grid {
    margin-top: $gridGap;
  }
}
Enter fullscreen mode Exit fullscreen mode

那么，我们在这里做了什么？

首先，我们定义了网格元素的最小宽度。

在 grid-template-columns 中，我们使用了 repeat 函数，这样 CSS 就能将相同的参数应用到每一列。此外，我们使用了 auto-fit 属性而不是具体的数值。这样做的好处是，无论使用多少列，列的宽度都会相等，它们会自动拉伸并填充可用空间。

我们还使用了 minmax() 函数来设置每列的最大宽度，并将最大值设为 1fr。这样可以确保内容填充到每一列的全部可用空间。

最后，我们添加了一个间隙和一个可选规则，以便在连续的容器中应用相同的值。

结果如何？

只有一个缺点。当列数超过三列时，在某些视口中可能会出现孤立列。

你可以使用媒体查询来解决这个问题，但是你需要为多个断点编写大量的代码。

3. 保持各构件高度一致

曾经有一段时间，我们使用 jQuery 来计算容器的高度，以确保它们高度相等。当时两个容器的内容并不相同，但为了用户体验，我们希望它们的高度保持一致。

但现代 CSS 技术是如何简化这个过程的呢？答案是：使用网格系统。

/*Parent container*/
.parent {
  display: grid;
  grid-auto-flow: column;
}
/*Child elements*/
.child {
    height: 100%;
  }
Enter fullscreen mode Exit fullscreen mode

通过将网格自动流切换为行或列，我们可以拥有宽度或高度统一的容器。

我们还可以使用 CSS flexbox，用更简单的代码实现相同的功能。

/*Parent elements*/
.parent {
  display: flex;

/* Child elements */
  .child {
    height: 100%;
  }
}
Enter fullscreen mode Exit fullscreen mode

那么，哪个更好呢？答案是，两者各有优势。如果您只是想解决元素高度相等的问题，Flexbox 是最佳选择。但是，在 Flexbox 中，元素的宽度可能不相等。

不过，如果需要，Grid 布局可以处理等宽元素。此外，如果想要限制每行的列数，Grid 布局也能自动计算。但如果你使用 Flexbox 布局，则需要为此定义计算公式。

4. 提升流畅滚动的用户体验

如今，有了固定头部，“返回顶部”链接的使用频率已经不高，但它曾经风靡一时。其理念是创建一个链接，让用户可以滚动浏览网站顶部内容。让我们一起来看看如何使用现代 CSS 技术来实现返回顶部链接。

我们先来创建内容。

<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>
Enter fullscreen mode Exit fullscreen mode

首先，我们将为页面添加平滑滚动效果。

html {
    scroll-behavior: smooth;
  }
Enter fullscreen mode Exit fullscreen mode

然后，我们将根据个人喜好设置返回顶部链接的样式。您也可以添加一个漂亮的 SVG 图标，而无需手动设置样式。

现在，需要选择滚动条的行为方式。定义滚动长度。

$scrollLength: 100vh;
Enter fullscreen mode Exit fullscreen mode

接下来，在包装器中，将滚动值设置为预定义的滚动长度。

.back-to-top-wrapper {
  position: absolute;
  top: $scrollLength;
}
Enter fullscreen mode Exit fullscreen mode

为返回顶部链接添加必要的样式。请务必使用 position-sticky 属性将其固定在特定位置。

.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
}
Enter fullscreen mode Exit fullscreen mode

完成了，我们得到了想要的结果。

来源

5. 通过添加替代文本“focus”来提高网站的可访问性

无障碍访问是任何网站的必备功能，因为遵循 WCAG 指南是强制性的。但无障碍访问究竟意味着什么？它意味着您的网站应该对所有人开放，尤其是残障人士。

我们经常会移除按钮或链接上的焦点轮廓，以摆脱原生样式。然而，这样做却忽略了提供替代的焦点状态。结果，使用键盘浏览网站的用户无法识别当前焦点元素。这直接违反了可访问性规范。

我们可能觉得浏览器默认的焦点样式在您页面上精心设计的元素上显得不太美观。不过，添加几行代码来实现另一种焦点样式就非常理想了。例如，假设我们有一个按钮。

您可以添加 –

button:focus {
  outline: max(1px, 0.1em) solid currentColor;
  outline-offset: 0.25em;
}
Enter fullscreen mode Exit fullscreen mode

这里，我们将 currentColor 视为您页面的主题颜色。在您的示例中，它是绿色。

使用 outline-offset，我们可以调整轮廓与元素之间的间距。

那里，焦点区域的颜色和按钮的颜色不匹配吗？您还应该查看一下用于辅助功能测试的顶级工具。

6. CSS 字体规则及创建流式排版比例

排版是提升任何简约网页外观和用户体验的最佳方式。CSS 帮助我们构建基本的字体比例基础。让我们一起来看看它是如何实现的。

推荐字体单位

还在纠结该用什么单位？%、rem、em 还是 px？定义排版时，首先要做的就是——别用 px。当用户在浏览器中缩放页面时，px 不会按比例缩放。推荐使用 rem。

1rem 的默认值为 16px，以 rem 定义的字体大小在浏览器缩放时保持不变。em 的
字体大小与其最近祖先元素的字体大小成正比。它只能用于希望子元素的间距相对于父元素的情况。

% 和 em 的行为几乎相同。但是，当需要相对大小时，em 更合适。

不妨了解一下Nikola Testing - 在 3000 多种不同的桌面和移动浏览器上测试您基于 Nikola CSS 框架的网站。

防止文本溢出

防止文本溢出是确保网站未来兼容性的有效方法。它可以保证，即使容器中的文本将来增加，也不会超出容器或其边界。

p,
li,
h1,
h2,
h3,
h4 {
  // Help prevent overflow of long words/names/URLs
  word-break: break-word;
}
Enter fullscreen mode Exit fullscreen mode

响应式排版

如果全局设置了较大的字体大小，在小尺寸设备上可能会出现溢出问题。为了解决这个问题，我们采用了流式字体。流式字体是指根据视口大小自动调整字体大小，就像响应式图片一样。您可以使用代码来计算最小字体大小和基本字体大小。

font-size: unquote("min(max(#{$fluid-min}rem, #{$fluid-scaler}), #{$level-size})");
Enter fullscreen mode Exit fullscreen mode

或者，您可以使用 vw（视口宽度）作为字体单位。

除了响应式排版之外，您还可以使用 LT 浏览器测试网页设计的响应性。

使用 LT Browser（一款响应式测试工具），您可以测试网站在 50 多个预置设备视口上的响应式性能。

LT浏览器拥有诸多强大功能，例如跨多个设备视口并行同步设备，从而获得更佳的媒体内容和对象浏览体验。网络限速功能可帮助您在各种网络条件下测试网站，包括在线、慢速3G、快速3G甚至离线状态。

LT Browser 配备了开发人员和设计师日常工作流程中所需的所有基本工具和功能。要了解有关 LT Browser 功能的更多信息，您可以参考我们的博客文章：《开发人员应该使用 LT Browser 的 11 个理由》。

以下视频教程将帮助您开始使用 LT 浏览器！

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>
Enter fullscreen mode Exit fullscreen mode

现在，我们来看CSS部分。我们使用SCSS来轻松地为单选按钮设置主题。

首先，我们将创建一个自定义颜色变量。

:root {
  --color: green;
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们使用一个通用选择器来重置盒子尺寸计算方法。它会在计算任何元素的最终尺寸时包含边框和内边距。

*,
*:before,
*:after {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

我们给标签添加了 `.radio` 类。我们使用 `grid-gap` 属性在按钮和标签之间添加间距。我们还会使用 `:focus-within` 和 `transform` 属性，以便在特定选项获得焦点时，标签的大小能够放大。

.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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

当选项未获得焦点时，我们将调整行高、添加过渡效果并降低标签的不透明度。

.radio-label {
  line-height: 1;
  transition: 180ms all ease-in-out;
  opacity: 0.8;
}
Enter fullscreen mode Exit fullscreen mode

我们将为包裹自定义控件和原生输入的按钮添加 display-flex 属性。

我们还将在聚焦区域使用双层阴影，并确保基座按钮与聚焦区域之间有区别。

.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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

为按钮选中状态添加样式。

.radio-gradient input:checked + .radio-control {
  background: radial-gradient(currentcolor 50%, rgba(255, 0, 0, 0) 51%);
}
Enter fullscreen mode Exit fullscreen mode

创建 :before 元素，以便在按钮未选中时为其添加动画效果。

.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);
  }
}
Enter fullscreen mode Exit fullscreen mode

最后，为单选按钮和主体添加样式。

.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;
}
Enter fullscreen mode Exit fullscreen mode

以下是输出结果。

8. 保持页脚底部位置

虽然单页应用程序不太容易出现这个问题，但如果您创建的是静态网页，您可能会经常发现页脚向上浮动。

我们可以用两种方法解决这个问题。

网格

我们来看一下代码。

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
Enter fullscreen mode Exit fullscreen mode

这里，我们设置了主体部分的最小高度。之后，我们使用 `grid-template-rows` 来正确地分配内容间距。该方法使用分数单位来计算可用空间并将其分配到多个行中。这样，它就能填充页眉和页脚之间的所有可用空间。

Flexbox

使用 flexbox，方法就更简单了。

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

首先，通过设置 min-height，我们确保页面主体能够铺满屏幕高度。然后，设置 flex-direction 可以保持堆叠的块级元素不变，从而维持文档的正常行为。

9. 动画图像

在 CSS 尚未得到充分现代化的时期，用户很难使用 jQuery 和 position:absolute 来实现图像标题和图像大小的动画效果。

然而，如今只需几行代码，我们就能为图片添加动画效果，并在鼠标悬停在图片上时触发动画。让我们来看一下代码。

.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);
  }
}
Enter fullscreen mode Exit fullscreen mode

它解决了鼠标悬停的问题。但如果有人使用键盘浏览网页呢？在这种情况下，我们可以使用焦点而不是悬停。

.image:focus {
  outline: none;
}
.image:hover,
.image:focus {
.image-caption {
    transform: translateY(0);
}
Enter fullscreen mode Exit fullscreen mode

10. 边框半径和阴影的高级用法

如今，开发者无需再为想要创建圆角的容器而烦恼。这要归功于 CSS3 提供的 border-radius 属性。例如——

边框半径：20% 50%；

我知道，这形状看起来有点奇怪。但这是为了演示 `border-radius` 的用法；如果你应用计算值，就可以给容器赋予任何你想要的形状。例如——

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

我们可以使用相对于元素大小的百分比值。如果您希望保持一致性，使用像 vw（视口单位）这样的相对单位会很有帮助。它们在移动设备上看起来更小，在桌面设备上看起来更大，但始终保持圆形。

另一个有助于提升页面元素用户体验的有趣属性是阴影框（box-shadow）。我们通常使用阴影框来为卡片或按钮等元素添加立体感。例如——

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

这里，水平偏移量为 3 像素，垂直偏移量为 4 像素。模糊半径为 5 像素，无扩展半径，阴影颜色为灰色。您可以根据喜好调整这些值，以增强方框的外观。

BoxShadow 的一个独特之处在于，您可以添加多个图层。例如——

box-shadow: 2px 4px 0 4px 黄绿色, 4px 8px 0 8px 黄色, 8px 10px 0 12px 红色;

我们还有一个有趣的图像处理技巧。想知道如何使用 box-shadow 为图像添加暗角效果吗？答案是：使用内嵌阴影。

.image-container {
  width: 30vmin;
  height: 30vmin;
  box-shadow: inset 0 0 4vmin 3vmin rgba(0, 0, 0, 0.5);
}
Enter fullscreen mode Exit fullscreen mode

11. 保持元素居中

以前，如果我们需要将某个元素保持在页面中心，就必须使用绝对定位，并定义左、右、上、下四个参数。不过，现在情况已经不同了。现代 CSS 技术为我们提供了一种更简洁的解决方案，可以帮助我们在多种分辨率下保持元素居中。

要使元素水平和垂直居中，我们只需向元素添加两个属性。

display: grid;
place-content: center;
Enter fullscreen mode Exit fullscreen mode

如果你想使用 flexbox 来保持页面上其他 flexbox 元素之间的一致性，你需要添加一行代码。

display: flex;
align-items: center;
justify-content: center;
Enter fullscreen mode Exit fullscreen mode

那么，如果你想让一个元素沿特定轴居中对齐呢？在这种情况下，你需要移除 display 属性。要实现垂直居中对齐，你需要这样写：

align-content:center;
Enter fullscreen mode Exit fullscreen mode

结果如下。

另一方面，要使元素水平居中，则必须使用 justify-content 而不是 align-content。

justify-content:center;
Enter fullscreen mode Exit fullscreen mode

上述解决方案适用于网格布局项目。对于弹性布局项目，代码略有不同。

要实现垂直对齐，您需要这样写——

justify-content: center;
flex-direction: column;
For horizontal alignment, you will need - 
justify-content: center;
Enter fullscreen mode Exit fullscreen mode

12. 使用 CSS 绘制形状

现代 CSS 技术让我们免去了使用脚本绘制对象的麻烦。现在我们有很多实用的方法来创建基本的 CSS 形状。让我们来看看如何创建 CSS 三角形。

使用边框

使用 border 属性可以帮助我们创建三角形。我们先从容器开始。

.triangle {
  border-style: solid;
  border-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

现在，让我们使用 border-width 属性，给边框的左侧赋予一个颜色。

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}
Enter fullscreen mode Exit fullscreen mode

结果如下所示。

我们可以调整 border-width 的上、右、下、左值来改变三角形的方向。

使用线性梯度

我们可以将它与 background-image 属性一起使用。

首先，我们创建一个容器，赋予它尺寸，并防止背景重复。

.triangle {
  width: 8em;
  height: 10em;
  background-repeat: no-repeat;
}
Enter fullscreen mode Exit fullscreen mode

现在，我们来添加渐变效果。这将使容器的一半变成蓝色。

添加两个渐变后，形状在容器中变成了一个镜像三角形。

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;

所以，我们最终得到的形状看起来像个三角形。然而，这种方法也有缺点：形状不具备响应式设计。如果宽高比发生变化，我们可能需要重新计算角度。

嘿，你听说过 Nuxt Testing 吗？它可以在线测试你的 Nuxt 网页的响应式设计和移动设备兼容性。告别你自建的设备实验室，使用可扩展的在线设备云平台，即使测试用例规模扩大，也不会让你倾家荡产。

总结完毕！

CSS 的发展日新月异。开发者们正在创建纯 CSS 库，以减少对脚本的依赖，减小网站体积，从而提升网站的 SEO 性能。我们希望这篇高级 CSS 教程能帮助您探索现代 CSS 技术如何帮助我们解决一些开发者经常遇到的、需要依赖脚本才能解决的常见问题。如果您了解或使用过其他现代 CSS 技术来解决设计相关的问题，欢迎与我们分享。

文章来源：https://dev.to/lambdatest/12-modern-css-techniques-for-older-css-problems-5abb
准备 AWS Certified ...
🌙 代码库导航 | 初级 Web...