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

在这个高级CSS教程中，你将了解到现代CSS技术，以克服旧的CSS问题，并使你的整个网页设计工作流程更加完善。

发现现代的CSS技术是美化整个网页设计过程的最好方法之一。如果你一直在使用CSS，你可能已经遇到了一些布局或跨浏览器的兼容性问题。例如，CSS3样式不能与传统版本的IE浏览器兼容。不过，还是有很多情况下，我们想使用一个功能，却发现它不被支持或在不同的浏览器中表现不同。因此，在研究网络开发技术时，网站和网络应用的浏览器兼容性测试也很重要。

然而，随着网络技术的发展，开发人员也在努力找出应对其他问题的方法。例如，利用其他库来优化负载量大的网站的加载时间，或者在不太依赖Bootstrap的情况下使div标签更具有响应性。随着挑战的不断发展和增加，CSS也在不断发展。

在这个高级CSS教程中，我们将讨论12种现代CSS技术，以克服CSS带来的老问题。

让我们从现代CSS技术开始

1.CSS字体规则和创建一个流畅的排版比例

排版是增强任何简单化网页的外观和感觉的最好方法。CSS可以帮助我们建立一个基本字体尺度的基础。让我们来了解一下。

防止文本溢出

防止文本溢出是保护你的网站的一个好方法。它可以确保如果一个容器中的某些文本在将来增加，该文本不会超出容器或其边界。

CSS

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

响应性排版

如果你在全局范围内选择了大字体，你可能会在小设备上遇到溢出问题。为了解决这个问题，我们有一个流体类型。它意味着定义一个根据视口调整的字体大小值，就像响应式图像一样。你可以用一个代码来计算最小和基本尺寸。

CSS

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

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

2.高级CSS选择器

如果你打算开发一个可重复使用的CSS文件，并将其用于其他页面或UI组件，那么了解CSS选择器的工作原理是至关重要的。如果你正在寻找一个有价值的资源，提供关于CSS选择器的深刻信息，请查看《终极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;
}

伪类

你有没有见过一个表格，其交替的行有不同的颜色？想知道我们如何用几行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就会对每一列应用相同的参数。另外，我们使用了自动匹配，而不是一个数字。原因是无论你用多少列，现在的列都会有相等的宽度，它们会伸展并填满可用的空间。

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

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

结果是什么？只有一个缺点。对于超过三列的内容，在某些视口中，你可能会发现一个无主的列。

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

4.保持元素的高度统一

曾经有一段时间，我们用jQuery来计算，以确保容器的高度是相等的。这时，两个容器的内容并不相等，但我们想让它们的高度相等，以利于用户体验。

但是，现代CSS技术是如何使这个过程变得简单的呢？嗯，通过使用网格系统。

CSS

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

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

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

CSS

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

  /* Child elements */
  .child {
    height: 100%;
  }
}

那么，哪一个更好呢？答案是，两者都有其同等的使用优势。如果你想要的解决方案只是解决元素等高的问题，那么flexbox是最佳选择。然而，在flexbox中，元素的宽度可能不相等。

然而，如果你需要的话，Grid可以处理等宽的元素。此外，如果你想在每行有一个最大的列数，网格可以处理这个数学问题。但如果你使用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.通过添加备用的方式提高网站的可访问性：焦点

可访问性是任何网站必须具备的功能，因为它必须遵循WCAG指南。但无障碍性是什么意思？它意味着你的网站应该对所有人都是无障碍的，特别是对不同的残疾人。

通常情况下，我们删除：按钮或链接上的焦点轮廓，以摆脱本地风格。然而，在这样做的同时，我们未能提供一个替代的焦点阶段。结果，使用键盘浏览网站的人无法检测到当前的焦点元素。这是一个直接违反无障碍性的行为。

我们可能觉得，浏览器的默认：焦点样式在你的页面上保留的有吸引力的元素上看起来并不好看。然而，对于添加几行代码的替代性焦点样式来说，它是非常理想的。例如，假设我们有一个按钮。

你可以添加--

CSS

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

这里，我们认为currentColor是你页面的主题颜色。在你的例子中，它是绿色的。

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

在那里，聚焦的阶段不是和按钮的颜色一致吗？你也应该检查一下无障碍测试的顶级工具。

7.单选按钮的样式

开发人员需要一个自定义风格的单选按钮，因为默认的HTML单选按钮在不同的浏览器中出现的方式不同。以下是单选按钮在Mac上运行的Firefox中的样子。

而这是它们在Safari中的样子。

不仅如此，本地的单选按钮不能随字体大小而变化。

让我们来看看如何创建一个统一的单选按钮，在所有的浏览器上都是一样的，并随着标签的字体大小而缩放。

让我们先从HTML开始。

CSS

<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。我们使用SCSS来轻松地设计单选按钮的主题。

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

CSS

:root {
  --color: green;
}

接下来，我们使用一个通用的选择器来重设盒子大小的方法。它将在计算任何元素的最终尺寸时包括边框和填充。

*,
*: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，以包裹自定义控件和本地输入。

我们还将在焦点阶段使用双框阴影，并确保基本按钮和焦点阶段之间有区别。

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;
    }
  }
}

当按钮处于选中阶段时，添加一个样式。

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);
  }
}

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

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;
}

在这里，我们保持了主体的最小高度。之后，我们使用grid-template-rows来正确地给内容留出空间。该方法使用一个小数单位，计算出可用的空间，并将其分配给几行。因此，它将填补页眉和页脚之间的所有可用空间。

Flexbox

使用flexbox，该方法更加简单。

CSS

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

首先，通过min-height，我们确保主体伸展到屏幕的全部高度。然后，设置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);
  }
}

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

CSS

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

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

现在的开发者不必再为他们想做成圆角的容器创建圆角的盒子，这很麻烦。这要感谢CSS3给我们提供的border-radius属性。比如说--

>border-radius: 20% 50%;

我知道，这是个看起来很奇怪的形状。但这是为了演示border-radius的用途；如果你应用计算值，你可以给一个容器提供任何你想要的形状。比如说--

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

我们可以使用相对于元素大小的百分比值。如果你想保持一致性，像vw（视口单位）这样的相对单位很有帮助。它们在手机上看起来比较小，在桌面上看起来比较大，但却能保持一致的圆形。

另一个有趣的属性可以帮助我们为页面的元素添加一个漂亮而舒缓的用户体验，那就是盒影。通常我们使用盒状阴影来为卡片或按钮等元素添加一丝提升。比如说

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

在这里，我们有一个3px的水平偏移和一个4px的垂直偏移。我们也有一个5px的模糊半径，没有扩散半径，和灰色的阴影。你可以根据你的选择来调整这些值，以增强盒子的外观。

盒状阴影的一个独特功能是，你可以添加多个层次。比如说

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

我们也有一个有趣的图像黑客。想知道如何使用盒状阴影为图片添加晕染效果？答案是，使用嵌套阴影。

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;

现在，如果你想把一个元素放在任何特定的轴线上居中对齐，该怎么办？那么，在这种情况下，你必须删除显示属性。对于垂直居中对齐，你必须写上

CSS

align-content:center;

这就是结果。

另一方面，为了使一个元素保持水平居中，你必须使用justify-content，而不是align-content。

CSS

justify-content:center;

上面提到的解决方案是针对网格项目的。对于柔性项目，代码有一些变化。

对于垂直对齐，你必须写 -

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的顶部、右侧、底部和左侧的值进行洗牌，以改变三角形的方向。

使用线性梯度

我们可以将其与背景-图像属性一起使用。

首先，让我们创建一个容器，给出尺寸并防止背景重复。

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技术如何帮助我们解决一些开发者经常面临的、依赖脚本解决的常见问题。如果你知道或使用过其他现代CSS技术来解决设计相关的问题，请告诉我们。

使用12种现代CSS技术克服老式CSS问题，使网页设计工作流程更加完善的教程