网站建设之一些自定义css样式推荐

只是为了好玩，我浏览了一些我最近的CSS文件，并使用了希望存在的虚构CSS功能重写了部分内容。然后，我请了一些能干的“云四”工作人员来帮助我说明其中的一些想法。

据我所知，在撰写本文时，这些示例都不是真实的 ……它们纯粹是幻想！

这是最缺少的CSS功能，而我继续在每个项目中找到用例。这是一个简单的例子：仅当元素的宽度小于整个视口宽度时，才将其圆角。

.card:media(width < 100vw) {
  border-radius: 0.5em;
}

网站建设

诸如PostCSS Inline SVG之类的插件使我对未来充满信心，因为SVG不仅是我们演示的内容，而且是我们演示文稿的一流公民。

@svg icon-star {
  content: url("/icons/star.svg");
  stroke: currentColor;
  stroke-width: 0.125em;
}

.icon-star {
  background-image: icon-star;
}

vertical-align: middle将元素与文本的基线对齐，减去其x高度的一半。这使得它不太适合象图标这样的字形大小的元素，它们看起来总是有点太低。理想情况下，我们将具有一个与字体的顶盖高度的中间对齐的属性。

.icon {
  vertical-align: text-middle;
}

使子元素独立于文档滚动很容易。但是，很容易允许模式和菜单之类的“全屏”元素接管为文档的主要滚动元素。

.menu.is-open {
  overflow: document;
}

使元素足够大以至于我们的手指可能比看起来更具挑战性。如果可以通过CSS操作交互式区域，这将是很大的事情！

.button {
  pointer-box-offset: 0.5rem;
}

像面包屑这样的水平导航模式通常在每个段之间都包含视觉分隔符。尽管有几种方法可以通过CSS设置这些分隔符的样式（例如，使用伪元素和相邻的同级选择器），但数量惊人的网站仍然在HTML中使用硬编码竖线或其他文本字符。

也许我们需要的是一种在相邻元素之间注入内容的简单方法，而不是之前或之后？

.breadcrumbs > *::between {
  content: "▸";
  margin: 0 2ch;
}

网站建设

我们不能只覆盖<select>箭头和类似的细节而不完全消除它们，这感觉有点傻。

select::expand {
  content: url("icons/arrow-down.svg");
}

东西我总是从我的平面设计天怀念的是能够自动对准引号，大写的“T”字，等稍微过去框缘，使他们看起来更具有视觉平衡。

body {
  text-align: optical left;
}

更新： Amelia Bellamy-Royds有帮助地指出，此属性可能部分解决了hanging-punctuation。它只有在Safari支持写这篇文章的，但它看起来像一个可喜的一步！

渐变在浏览器中看起来很粗糙，而无需应用任何缓动！交叉指责，最终使它成为了CSS规范。

.example {
  background-image: linear-gradient(to bottom, cubic-bezier(0.455, 0.03, 0.515, 0.955), #456BD9, #F14CA3);
}

网站建设