CSS 奇淫技巧

收集个人使用过或遇到的 CSS 奇淫技巧

识别 HTML 字符中的 \n

TIP

white-space 属性用于设置如何处理元素中的空白

white-space: pre;

属性值	换行符	空格和制表符	文字换行
normal	合并	合并	换行
nowrap	合并	合并	不换行
pre	保留	保留	不换行
pre-wrap	保留	保留	换行
pre-line	保留	合并	换行
break-spaces	保留	保留	换行

MDN

CSS(Unicode 字符) 实现换行

TIP

在 Unicode 中，0x000A 字符是专门控制换行的。在 CSS 中，我们可以写为 \A 或 \000A 作为 after 伪元素的内容，并添加到指定元素中实现换行效果。

<div>
  <span class="br">前端常用知识软件推荐</span>
  <span class="br">踩坑记录</span>
  <span>各种兼容问题</span>
</div>

.br::after {
  content: '\A';
  white-space: pre;
}

前端常用知识软件推荐踩坑记录各种兼容问题

相关资料

• 使用 CSS(Unicode 字符)让 inline 水平元素换行

网页置灰

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  /* 兼容 Firefox */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* 兼容 IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /*兼容 Chrome Safari Edge 等 */
  -webkit-filter: grayscale(1);
}

相关资料

• 一段 css 让全站变灰
• filter - CSS —— MDN

图片加载失败后的处理

利用替换元素和伪元素的特性来实现

• 在替换元素加载失败后，会显示伪元素的内容（如 img 标签加载失败）
• 当替换元素没有内容时，会显示伪元素的内容（如 img 标签没有 src 属性）

实现思路：

• ::before 伪元素用于显示异常图片提示
• ::after 伪元素用于显示 alt 文案

<template>
  <div class="flex-row-center gap-8">
    <img class="img" src="/public/sponsor/wechat-color.webp" alt="图片加载成功" />
    <img class="img" src="" alt="图片加载失败" />
    <img class="img" alt="没有 src 属性" />
  </div>
</template>

<style>
.preview-box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.img {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  transform: scale(1);
}

/* 显示异常图片提示 */
.img::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5 url(./images/error.svg) no-repeat center / 50% 50%;
  color: transparent;
}
/* 显示 alt 文案 */
.img::after {
  content: attr(alt);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

相关资料

• 图片加载失败后 CSS 样式处理最佳实践 | 张鑫旭-鑫空间-鑫生活