首页
开发技巧正文内容

只有经验丰富的网页开发人员才知道的 10 个 CSS 技巧

2024年08月22日
阅读时长 6 分钟
阅读量 8
只有经验丰富的网页开发人员才知道的 10 个 CSS 技巧

网页开发人员使用 CSS 样式语言为语义 HTML 文档添加动态、创意、用户友好的样式。刚接触 CSS 的网页开发人员通过练习基本的 CSS 选择器语法、属性、@规则和伪类/伪元素来学习样式,这些 CSS 功能足以构建一个可访问、美观、用户友好、现代的网站,但要了解 CSS 的全部潜力,还有更多要学习的。

当网页开发人员广泛使用 CSS 设计网站前端并尝试 CSS 时,他们经常发现新功能、解决方法和技巧,这些帮助他们提高生产力并改善 CSS 技能。这些技巧和窍门帮助每个人在不编写 JavaScript、SVG 和基于 HTML Canvas 的实现的情况下,高效实现快速、吸引人的 CSS-only 解决方案来解决设计问题。例如,现在网页开发人员可以创建快速、轻量级的倒计时器,而无需编写一行 JavaScript 代码。

在本文中,我将解释十个 CSS 技巧和窍门,帮助您充分利用 CSS,以高效地构建现代网页界面,而无需使用 JavaScript、SVG、HTML Canvas 或集成庞大的第三方 UI 工具包和库。练习这些技术,扩展您的 CSS 掌握能力!


1. 居中元素的最简单方法

正确放置 UI 元素是设计高质量界面的强制要求。在大多数情况下,网页开发人员必须垂直和水平居中子元素。由于不同的布局系统和定位特性,CSS 无法提供单个属性来居中任何元素。在响应式设计流行之前,网页开发人员使用负边距技巧来居中 HTML 元素 - 现在,您会发现许多方法来使用各种现代和旧的 CSS 属性来居中元素,但在 CSS 中最简单的方法是什么?

现代 CSS 网格功能支持使用 place-items 简写属性来居中网格块,因此我们可以使用它来居中子元素,如下所示:

<div>
  <button>一个居中的按钮</button>
</div>

<style>
  div {
    height: 100vh;
    display: grid;
    place-items: center;
  }
</style>

使用 CSS 网格功能居中 HTML 元素,作者提供的屏幕截图


2. 使用 CSS 边框创建三角形

内置的 SVG 实现通常提供了生成任何高级、自定义形状的全功能方法。因此,标准的 HTML 实现没有提供内置标签来从标准 DOM 元素创建任意形状,但我们可以使用标准的 CSS 属性将 div 元素转换为各种几何形状,例如,使用 border-radius 创建圆形。

默认 div 元素中边框渲染的行为在流行的浏览器中是相同的,它让我们可以创建三角形,如下所示:

<div></div>

<style>
  div {
    border-right: 20px solid transparent;
    border-bottom: 20px solid darkcyan;
    border-left: 20px solid transparent;
  }
</style>

使用 CSS 边框创建简单三角形形状,作者提供的屏幕截图

您可以通过为不同的边框边添加可见颜色并更改边框厚度来创建各种三角形。


3. 纯 CSS 倒计时

过去,网页开发人员通常使用 JavaScript 在网页上创建简单的倒计时器。CSS 动画功能帮助网页开发人员在不编写 JavaScript 代码的情况下动态更新 DOM 元素的视觉效果。因此,现在我们可以使用标准 CSS 动画创建方法来创建倒计时,通过定义几个关键帧。

我们可以使用 @property @规则、CSS 变量和 CSS 计数器来使用纯 CSS 在记录时间内创建灵活、可定制的倒计时,而无需自己创建很多关键帧:

<div></div>
<style>

  @property --c {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
  
  @keyframes timer {
    from { --c: 10 }
    to   { --c: 0 }
  }
  
  :root { animation: timer 5s linear }

  div::after {
    counter-reset: c var(--c);
    content: counter(c, decimal-leading-zero);
  }
</style>

上述 CSS 片段使用 @property @规则、变量和计数器与 CSS 动画功能创建了一个计时器。即使它不使用很多动画关键帧定义,它也使用 counter-reset 属性为每个动画帧呈现动态值:

一个简单的纯 CSS 倒计时器,作者提供的屏幕录制

通过使用 calc()mod() CSS 数学函数,调整全局计时器变量的结束值,您可以创建显示分钟、秒和毫秒的倒计时器。

从以下故事中了解更多关于 CSS 函数的知识:

帮助您设计现代前端的 CSS 函数


4. 不使用 JavaScript 创建自定义原生表单控件

浏览器将 DOM 元素呈现为浏览器视口边界内的可视 UI 元素。但是,HTML 表单元素通常打开超出标准 DOM 视口的原生 UI 元素,因此没有跨浏览器解决方案来自定义原生表单元素的平台特定、浏览器特定弹出元素。例如,我们无法自定义 HTML 选择元素的下拉弹出窗口,但我们可以使用 CSS 自定义选择框的初始视图在所有浏览器中,因为初始表单控件视图在 DOM 中呈现:

<div>
  <select>
    <option>React</option>
    <option>Angular</option>
    <option>Svelte</option>
    <option>Vue</option>
    <option>Lit</option>
  </select>
</div>

<style>
  div {
    position: relative;
    min-width: 200px;
  }
  
  select {
    appearance: none;
    padding: 6px;
    font-size: 14px;
    border-radius: 4px;
    width: 100%;
    border: 2px solid #ccc; 
    outline: none;
  }

  select:focus { border: 2px solid #aaa; }

  div::after {
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    border-left: 6px solid transparent;
    position: absolute;
    top: 42%;
    right: 12px;
    content: "";
    pointer-events: none;
  }
</style>

上述 CSS 定义通过添加自定义图标和边框来自定义 HTML 选择元素的初始视图,如下预览所示:

使用 CSS 自定义原生选择元素,作者提供的屏幕录制

使用相同的技术,您可以覆盖用户代理样式表中的默认样式,自定义其他原生表单控件并添加额外的子元素,而无需使用 JavaScript 嵌入元素。


5. 使用渐变填充创建花式边角

众所周知,border-radius CSS 属性帮助我们为矩形 DOM 元素创建圆角或椭圆边缘。此外,使用 clip-path 属性,我们可以创建漂亮的花式边角。您知道我们可以使用渐变填充创建创意花式边角吗?

通过为元素填充径向渐变背景,我们可以创建一个完美的、锐利的圆形。如果我们将生成的圆形设为透明,将其用作蒙版,并移动到角落,它会切割所有四个角,创建类似相框的边角:

<div></div>

<style>
  div {
    width: 200px;
    height: 100px;
    background: darkcyan;
    mask: radial-gradient(14px at 40px 40px, transparent 98%, black) -40px -40px;
  }
</style>

使用径向渐变填充创建花式边角,作者提供的屏幕截图

这个网页应用 让您通过动态调整几个参数来生成这些类型的边角。


6. 在属性选择器中使用模式匹配

网页开发人员通常使用类和标识符为语义 HTML 元素应用样式。CSS 标准还支持带有模式匹配的属性选择器,因此我们可以使用它们为元素编写全局样式。一个简单的例子是编写以下选择器,为所有原生文本输入添加全局样式:

input[type="text"] {
   /* ... */
}

属性选择器适用于任何标准 HTML 属性和自定义属性,即数据属性。属性选择器语法还支持模式匹配,因此我们可以使用这种技术为无法编辑的 HTML 文档(例如,为第三方 HTML 文档或 CMS 页面模板设置样式)编写广义样式的简写选择器:

<div>
  <button class="ok-btn">确定</button>
  <button class="re-try-btn">重试</button>
  <button class="cancel-btn">取消</button>
</div>

<style>
  button[class$="-btn"] {
    min-width: 6em;
  }
</style>

上述选择器为所有类名以 -btn 结尾的按钮元素添加样式。

以下是另一个示例,使用属性模式匹配为维基百科超链接添加不同样式:

a[href*=".wikipedia.org"] {
  color: darkcyan;
}

7. 创建自定义列表样式类型HTML 标准提供了 <ol><ul> 语义标签,用于在网页上创建列表。这些标签带有默认的列表样式,但您可以使用 list-style-type 属性覆盖这些默认列表样式。例如,以下 CSS 定义激活了小写罗马数字编号系统:

ol {
  list-style-type: lower-roman;
}

@counter-style at-rule 允许您通过使用预先包含的列表样式或从头开始创建新样式来为 list-style-type 属性创建自定义样式定义。以下 HTML 文档使用了一个使用表情符号创建的自定义列表样式:

<div>
  <ul>
    <li>React</li>
    <li>Angular</li>
    <li>Svelte</li>
    <li>Vue</li>
    <li>Lit</li>
  </ul>
</div>

<style>

  @counter-style emojis {
    system: cyclic;
    symbols: "\1F449\1F3FD";
    suffix: " ";
  }
  
  ul { list-style-type: emojis }

</style>

作者创建的使用 Unicode 表情符号的自定义列表样式的屏幕截图

这个 CSS at-rule 允许您扩展现有的列表计数器并创建自定义计数器。例如,以下样式定义在每个有序列表项之前使用连字符 (-) 渲染数字周围的括号:

  @counter-style custom-roman {
    system: extends lower-roman;
    prefix: "[";
    suffix: "] - ";
  }
  
  ol { list-style-type: custom-roman }

8. 为主要部分创建艺术背景

现代网站设计包含一个称为主要部分的大型介绍部分,介绍网站并放置几个主要操作按钮。网页开发人员通常使用创意背景图像创建这些主要部分。现在,由于内置的 CSS 滤镜和混合模式,我们无需编辑原始源图像即可为主要部分创建创意背景图像。

我们可以通过使用 ::after 伪元素并对其背景图像应用各种滤镜来创建一个主要部分,如下所示:

<div>
  <h1>主要部分</h1>
</div>

<style>
  div {
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
    overflow: auto;
  }

  div::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(4px) brightness(0.65) sepia(90%);
  }
</style>

作者创建的使用 CSS 滤镜的创意主要部分的屏幕截图

同时,mix-blend-mode 属性帮助我们通过基于背景颜色为背景图像添加颜色混合效果来创建创意主要部分,如下例所示:

  div {
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    isolation: isolate;
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
  }

  div::after {
    content: "";
    position: absolute;
    background: #594100;
    inset: 0;
    z-index: -1;
    mix-blend-mode: multiply;
  }

作者创建的使用 CSS 混合模式的创意主要部分的屏幕截图

您还可以使用 backdrop-filter CSS 属性创建艺术主要部分,但并非所有流行的标准浏览器都支持该属性。


9. 使用 CSS 添加用户友好、吸引人的滚动行为

您还记得过去 JQuery 时代我们如何使用 .scrollTo() 函数来实现平滑滚动动画吗?现在,网页开发人员可以通过纯 CSS 更改滚动行为并激活平滑滚动!

看看以下激活平滑滚动的 CSS 定义:

<a href="#target1">[1]</a>
<a href="#target2">[2]</a>

<div id="target1"></div>
<div id="target2"></div>

<style>
  div {
    height: 100vh;
    border-bottom: solid 40px #aaa;
    background-color: #ccc;
  }

  :root { scroll-behavior: smooth }
</style>

通过这个 CSS 定义,浏览器甚至对返回按钮激活平滑滚动,如下预览所示:

使用 CSS 激活平滑滚动,作者的屏幕录制

CSS 滚动捕捉模块提供了一组 CSS 属性,以改善可滚动容器的可用性和可访问性因素。例如,以下代码片段自动停止在主要部分处滚动,并避免在部分部分停止:

<section style="background: #ccc">1</section>
<section style="background: #aaa">2</section>
<section style="background: #ccc">3</section>
<section style="background: #aaa">4</section>

<style>
  section {
    height: 100vh;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    font-size: 7em;
  }
  
  :root {
    background-color: #eee;
    scroll-snap-type: y mandatory;
  }
</style>

使用 CSS 滚动捕捉停止在主要部分,避免在部分部分停止,作者的屏幕录制

CSS 滚动捕捉功能帮助我们在移动应用程序中实现无需 JavaScript 的、最小纯 CSS 解决方案,用于支持滑动功能。从 官方 MDN 文档 了解更多关于滚动捕捉模块的信息。


10. 无类 CSS 样式技术

每个网页开发人员都有一个使用类开始样式的惯例。使用组织良好的类无疑是创建干净、易管理的网页的良好实践。然而,为创建最小的网页并不一定需要创建类 - 无类网页设计概念鼓励我们使用语义 HTML 标签编写 CSS:

nav {}
ul {}
ul li {}
summary {}

功能选择器(作为 伪类 实现)如 :not():has():is() 帮助我们通过避免在无类样式表中重复选择器段来编写清晰的代码。例如,以下代码片段使用 :not() 为导航菜单项添加颜色样式,除了最后一个项:

<nav>
  <ul>
    <li>主页</li>
    <li>服务</li>
    <li>关于</li>
    <li>联系</li>
  </ul>
</nav>

<style>
  nav ul {
    display: flex;
    list-style: none;
    gap: 1em;
    background: #eee;
    padding: 1em;

    :not(li:last-child) {
      color: darkcyan;
    }
  }
</style>

使用功能选择器为无类导航栏添加样式,作者的屏幕截图

假设您应该为呈现 SVG 图标的菜单项添加自定义样式。然后,您可以使用 :has() 功能选择器选择这些菜单项,如下所示:

li:has(svg) {
  /* ... */
}

:has() 伪类可以与属性选择器和 CSS 变量结合使用,以实现交互式主题更改:

<div>
  <label><input type="radio" value="t1" name="t" checked>主题 1</label>
  <label><input type="radio" value="t2" name="t">主题 2</label>
</div>

<style>
  body { 
    background-color: var(--background-color);
    color: var(--text-color);
    transition: all 0.5s;
  }
  
  :root:has(input[value="t1"]:checked) {
    --background-color: darkcyan;
    --text-color: white;
  } 

  :root:has(input[value="t2"]:checked) {
    --background-color: skyblue;
    --text-color: black;
  }   
</style>

使用纯 CSS 创建的交互式主题选择器,作者的屏幕录制

:is() 功能选择器帮助我们为逗号分隔的长选择器编写替代简写选择器:

/* 传统方式 */
section h1, 
section h2, 
section h3, 
section h4, 
section h5, 
section h6 {
  color: darkcyan;
}

/* 现代方式 */
section :is(h1, h2, h3, h4, h5, h6) {
  color: darkcyan;
}

感谢阅读。

免责声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

相关文章

探索多种软件架构模式及其实用应用
2024年11月22日19:06
本文深入探讨了多种软件架构模式,包括有界上下文、边车模式、发布-订阅模式、应用网关、微服务、命令职责分离(CQRS)等,介绍了它们的优点、使用场景以及具体应用实例。文章强调根据具体项目需求和团队能力选择最合适的架构,以构建高效和可维护的解决方案,同时展示了各架构模式间的综合应用,提供了丰富的案例和技术细节。
15个高级Python快捷键助您更快编程
2024年11月21日07:02
本文分享了 15 个高级的 Python 编程快捷键,包括上下文管理器、行内字典合并、函数参数解包、链式比较、dataclasses、海象运算符、反转列表、备忘录缓存、splitlines、enumerate、字典推导、zip 用于并行迭代、itertools.chain 扁平化列表、functools.partial 部分函数和 os.path 文件路径管理等,帮助开发者提高编程效率和代码简洁性。
揭示网页开发的 11 个迷思:停止相信这些误区
2024年11月19日22:05
网页开发充满误解,这篇博文针对11个常见迷思进行揭秘。包括网站开发后不需更新、需掌握所有技术、AI会取代开发者等。强调持续学习、专业化、用户体验的重要性,澄清误区如多任务处理的必要性和最新技术的必需性。文章提醒开发者注重实用而非追求完美代码,以务实态度面对开发工作。
你知道 CSS 的四种 Focus 样式吗?
2024年11月18日21:41
本文介绍了四种 CSS focus 样式::focus、:focus-visible、:focus-within 以及自定义的 :focus-visible-within,帮助提升网站用户体验。:focus 样式应用于被选中元素;:focus-visible 仅在键盘导航时显示;:focus-within 用于父元素;自定义 :focus-visible-within 结合两者效果。合理运用这些样式能使网站更方便键盘用户导航。
利用 Python 实现自动化图像裁剪:简单高效的工作流程
2024年11月11日20:49
使用 Python 和 OpenCV 自动裁剪图像,轻松实现 16:9 的完美构图。这个指南介绍了如何通过代码进行灰度化、模糊处理和边缘检测,最终识别出最重要的部分进行裁剪。特别适合需要批量处理图像的情况,节省大量时间。
每位资深前端开发人员都应了解的 TypeScript 高级概念
2024年11月11日02:07
资深前端开发者应了解 TypeScript 的高级概念,如联合类型、交叉类型、类型保护、条件类型、映射类型、模板字面量类型和递归类型。这些特性可提升代码的可维护性和可扩展性,确保在开发复杂应用时实现更高的类型安全性和效率。