Logo

菜单

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

构建 CSS Ruler DEV 的全球展示与分享挑战赛，由 Mux 呈现：展示你的项目！

构建 CSS 标尺

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我目前正在开发一个项目，其中编辑器可以使用一组颜色编码的堆叠<input type="range">控件和一些 JavaScript 代码轻松编辑断点：

统治者

虽然这种方法可行，但如果结合标尺，断点会更容易可视化：

断点

起初，我硬编码了一个标尺，使用像素——但后来我想：“如果编辑器想要以em1 或ch250 像素或其他单位定义断点呢？”

让我们来看看如何使用 CSS backround-image、一堆变量以及少量 JavaScript 代码来创建一个可配置的标尺，用于可视化编辑器。

我们的尺子上会有两组“刻度”——低和高（我们稍后会研究这些数字）：

尺子号

两组刻度线都具有一些初始自定义属性：

.ruler {
  /* Low ticks */
  --ruler1-bdw: 1px;
  --ruler1-c:  #BBB;
  --ruler1-h: 8px;
  --ruler1-space: 5;

  /* Tall ticks */
  --ruler2-bdw: 1px;
  --ruler2-c:  #BBB;
  --ruler2-h: 20px;
  --ruler2-space: 50;
}
Enter fullscreen mode Exit fullscreen mode

利用这些特性，我们可以创建一个动态的background-image：

.ruler {
  background-image:
    linear-gradient(90deg, var(--ruler1-c) 0 var(--ruler1-bdw), transparent 0),
    linear-gradient(90deg, var(--ruler2-c) 0 var(--ruler2-bdw), transparent 0);
}
Enter fullscreen mode Exit fullscreen mode

但是，如果没有background-repeat和background-size，我们就看不到任何类似尺子的东西！

.ruler {
  background-repeat: repeat-x;
  background-size:
    calc(var(--ruler-unit) * var(--ruler1-space)) var(--ruler1-h),
    calc(var(--ruler-unit) * var(--ruler2-space)) var(--ruler2-h);
}
Enter fullscreen mode Exit fullscreen mode

差不多就完成了！我们只需要添加一些代码background-attachment: fixed，这样在滚动时标尺就能保持在原位！

数字相加：

对于这些数字，我们将创建一个列表：

<ul class="ruler-x">
  <li></li><li></li> <!-- repeat -->
</ul>
Enter fullscreen mode Exit fullscreen mode

尺子上的每个空格都将代表一个数字。该数字将与高高的<li></li>“刻度”底部对齐：

.ruler-x {
  color: var(--ruler-num-c);
  counter-reset: d 0;
  display: flex;
  font-size: var(--ruler-num-fz);
  height: var(--ruler2-h);
  inset-block-start: 0;
  inset-inline-start: calc(var(--ruler-unit) * var(--ruler2-space));
  line-height: 1;
  list-style: none;
  margin: 0;
  opacity: var(--ruler-x);
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

我们将使用 CSScounter根据 -property 属性填充数字--ruler2-space：

.ruler-x li {
  align-self: flex-end;
  counter-increment: d var(--ruler2-space);
  flex: 0 0 calc(var(--ruler-unit) * var(--ruler2-space));
}
.ruler-x li::after {
  content: counter(d);
  line-height: 1;
  padding-inline-start: var(--ruler-num-pi);
}
Enter fullscreen mode Exit fullscreen mode

创建编辑器

现在，让我们为标尺创建一个小型编辑器。

我们将使用一小段 JavaScript 代码来更新自定义属性：

app.addEventListener('input', (e) => {
  const input = e.target;
  const value = input.type === 'checkbox' ? (input.checked ? 1 : 0) : input.value;
  document.body.style.setProperty(input.name, value+(input.dataset.suffix||''));
})
Enter fullscreen mode Exit fullscreen mode

在 HTML 中，<input>向 `<style>` 标签添加 `s` <form id="app">，使用name`<style>` 设置属性值，value使用 `<style>` 设置值（没错！），data-suffix使用 `<style>` 向值添加任何后缀：

<input type="range" name="--ruler1-h" value="8" data-suffix="px">
Enter fullscreen mode Exit fullscreen mode

对所有需要可编辑的属性重复此操作。

演示

这里有一个 Codepen 示例，我使用上述方法添加了垂直标尺和编辑器（如果您使用的是 iOS 系统，请全屏打开以避免 iframe 滚动问题）：

附加题：从右到左

如果您想将y-axis标尺与 <code><p></code> 一起使用rtl，请添加一小段 CSS 代码：

[dir="rtl"] .ruler {
  background-position: 100% 0;
}
Enter fullscreen mode Exit fullscreen mode

封面图片来自pexels.com

文章来源：https://dev.to/madsstoumann/build-a-css-ruler-2opn
在职场中不应该使用的词语
管理混合型团队 1