郝 玉华

郝 玉华

1657220400

2022 年鲜为人知且未充分利用的 CSS 功能

CSS 不断发展,一些很酷且有用的属性要么完全被忽视,要么由于某种原因没有像其他属性那样被广泛讨论。在本文中,我们将介绍这些 CSS 属性和选择器的一部分。

在阅读了 Louis Lazaris 富有洞察力的文章“那些你从不使用的 HTML 属性”之后,我问自己(和社区)哪些属性和选择器鲜为人知或应该更频繁地使用。社区的一些回答让我感到惊讶,因为它们包含了一些非常有用且经常请求的 CSS 功能,这些功能在过去一两年内可用。

以下列表是根据社区请求和我的个人选择创建的。那么,让我们开始吧!

all属性 #

这是一个简写属性,通常用于通过有效地停止继承将所有属性重置为其各自的初始值,或强制所有属性继承。

  • initial
    将所有属性设置为其各自的初始值。
  • inherit
    将所有属性设置为其继承的值。
  • unset
    将所有值更改为其各自的默认值,即inheritinitial
  • revert
    结果值取决于此属性所在的样式表来源。
  • revert-layer
    结果值将匹配上一个级联层或下一个匹配规则。

此属性可有效地用于重置样式或重构 CSS以停止继承并防止不需要的样式泄漏。

https://codepen.io/smashingmag/pen/NWyRvZL

h2 {
   color: var(--color-primary);
   font-size: var(--font-size-large);
   line-height: 1.5;
   text-decoration: underline;
   margin-bottom: 2rem;
}

.article h2 {
  padding: 2em;
  border-bottom: 2px solid currentColor;
}

.article__title {
  /* We don't want styles from previous selector. We only need a margin and a font size. */
  all: unset;
  margin-bottom: 2rem;
  font-size: var(--font-size-medium);
}

我们可以跳到下一个级联层,从revert-layer另一个选择器继承样式,但防止级联中最近的选择器的样式泄漏。

在玩弄这个属性时,我发现了一个有趣的行为——下划线颜色不会更新为当前分配的颜色,除非text-decoration: underline;再次应用于.title包含该all属性的选择器。

https://codepen.io/smashingmag/pen/bGLwoGx

currentColor 

通常被称为“第一个 CSS 变量”,currentColor是一个等于元素color属性的值。它可用于将与属性相等的值分配color给任何接受颜色值的 CSS 属性。它强制 CSS 属性继承该color属性的值。

该值对于避免将相同的值分配给在同一选择器中接受颜色(如border-colorbackgroundbox-shadow等)的多个 CSS 属性非常有用。

https://codepen.io/smashingmag/pen/MWQjEYN

在我看来,最好的用例之一currentColor是样式化内联 SVG 元素。每当我们从设计工具中导出图标时,它都会附带fill设计中定义的特定颜色值和其他颜色值。我们可以手动将所有这些颜色值替换为currentColor,这样我们就可以轻松自定义 SVG 的颜色,而无需进入 SVG 标记并覆盖fill单个path或其他 SVG 元素的或其他基于颜色的属性,并使我们的CSS 选择器复杂而令人费解。

<!-- Before -->
<path fill="#bbdb44" d="..."/>

<!-- After -->
<path fill="currentColor" d="..."/>
/* Before */
.icon:hover path {
  fill: #112244;
}

/* After */
.icon {
  color: #bbdb44;
}

.icon:hover {
  color: #112244;
}

https://codepen.io/smashingmag/pen/MWQjEKN

自定义属性后备值 

自定义属性允许开发人员在样式表中创建可重用的值,而无需像 SASS 这样的 CSS 预处理器,从而为 CSS 带来了显着的改进。自定义属性立即被采用,并在今天被广泛使用,效果非常好,尤其是在主题和与 JavaScript 的交互中。

但是,我觉得后备值有些被忽略了。如果您不熟悉后备值,则它是可以分配给var功能的第二个值,如果未设置第一个值,则应用该值。

color: var(--color-icon, #9eeb34);

我们还可以设置另一个变量作为后备。

color: var(--color-icon-primary, var(--color-icon-default));

您可能已经看到如何使用此值来提供对默认样式的可靠回退,同时允许自定义。

这个次要值还允许以优雅的方式覆盖主题颜色而不增加特异性。

我们可以通过覆盖它们来轻松更改自定义变量值。

:root {
  --theme-color-background: #f5f5f5;
  --theme-color-text: #111111;
}

/* Global override on a parent class on <body> or <html> element */
.theme--dark {
  --theme-color-background: #111111;
  --theme-color-text: #f5f5f5;
}

但是对于这种全局覆盖并不适合所有组件的情况,我们想要微调各个组件的属性呢?在这种情况下,我们将不得不覆盖样式。

.box {
    color: var(--color-theme-default);
}

.theme--dark .box {
  color: var(--color-component-override);
}

因此,我们增加了特异性,这并不理想,并且可能在更复杂的情况下或在特异性不受管理的情况下导致问题。我们可以做的是使用后备值来应用主题而不增加组件内部的特异性。这使得组件更具主题性和可移植性,因为它没有为组件和其他类似依赖项引入任何父类名称。

:根 {

--theme-color-default: darkgoldenrod;
--color-some-other-color: cyan;
}

.theme--dark {
/* Dark theme */
  --color-component-override: var(--color-some-other-color);
}

.box {
  color: var(--color-component-override, var(--theme-color-default));
}

https://codepen.io/smashingmag/pen/wvyzroQ

计数器

CSS 允许开发人员定义可以使用 CSS属性递增、递减和显示的命名计数器。content

  • counter-reset
    此属性用于初始化单个或多个计数器。也可以分配一个默认的起始值。
  • reversed
    定义计数器时使用的函数,用于counter-reset使计数器向下计数而不是向上计数。
  • counter-increment
    指定要递增的计数器(如果将计数器定义为reversed或将负值传递给 ,则指定递减counter-increment)。默认增量值为 1,但也可以将自定义值传递给此属性。
  • counter
    用于访问计数器值。通常用于content属性。

https://codepen.io/smashingmag/pen/RwQGLpQ

在下面的示例中,我们正在初始化两个计数器articles,它们记录主要部分的notes计数和页面上的注释计数。一个节节可以有多个注释。

如果我们想轻松识别页面上的哪个注释属于哪个文章怎么办?我们需要为每个注释添加一个文章编号。例如,第三篇文章的第二个注释——“注释 3.2.”。

https://codepen.io/smashingmag/pen/vYdXemd

我们可以轻松地调整笔记计数器的初始化和显示方式。我们可以在单个content属性中使用多个计数器值。

使用 CSS 计数器,我们可以轻松地添加、删除和重新排列这些元素,而无需担心手动更新计数器值,也无需使用 JavaScript。

互动媒体查询

Cristian Díaz 在他最近的文章中谈到了这个话题。在创建响应式网站时,我们经常根据屏幕大小对输入机制做出假设。我们假设屏幕尺寸1920px属于台式电脑或笔记本电脑,并且用户正在使用鼠标和键盘与网站进行交互,但是带有触摸屏或智能电视屏幕的笔记本电脑呢?

这就是交互媒体功能的用武之地,它允许我们微调用户可以交互的组件的可用性(输入、画布菜单、下拉菜单、模式等),具体取决于主要输入机制——触摸、触控笔、鼠标指针等

@media (pointer: fine) {
  /* using a mouse or stylus */
}
@media (pointer: coarse) {
  /* using touch */
}
@media (hover: hover) {
  /* can be hovered */
}
@media (hover: none) {
  /* can't be hovered */
}

Cristian Diaz 的文章“悬停和指针媒体查询指南”中的表格。(大预览

aspect-ratio尺寸控制 #

最初发布时aspect-ratio,我认为我不会在图像和视频元素之外以及非常狭窄的用例中使用它。我惊讶地发现自己以类似的方式使用它currentColor——以避免不必要地设置具有相同值的多个属性。

有了aspect-ratio,我们可以轻松控制元素的大小。例如,等宽和等高按钮的纵横比为1. 这样,我们可以轻松地创建适应其内容和不同图标大小的按钮,同时保持所需的形状。

https://codepen.io/smashingmag/pen/qBxaPoX

更好的渐变 

我们在 Web 上使用渐变已有一段时间了,它们已成为设计的主要内容。然而,正如Josh W. Comeau 所指出的,渐变的中间部分有时会看起来是灰色和褪色,这取决于您使用的颜色。

在下面的示例中,我们在相同的两个值(绿色和红色)之间设置了两个渐变。注意在第一个示例中,中间部分的颜色看起来很混浊和褪色,因为浏览器默认使用 RGB 颜色插值。我们目前无法改变这一点,但我们可能会在未来使用新的 CSS 功能。但是,我们可以通过在渐变中添加一些中点来解决这个问题。

第二个示例使用具有多个中点的插值技术,该技术是使用 Josh W. Comeau 的梯度生成器工具生成的。注意中间部分现在是更深的黄色和橙色,它看起来比第一个示例更加生动和美丽。

https://codepen.io/smashingmag/pen/BaYLwxM

:where:is伪选择器 

去年,这两个伪选择器获得了更广泛的浏览器支持,尽管围绕它们进行了很多讨论,但我还没有看到 Web 上的所有这些用途。Stephanie Eckles 在她的文章中深入讨论了这两个伪选择器。

这两个选择器都处理分组和特异性,所以让我们从:is伪选择器开始。

让我们看一下下面的例子。我们要为列表项和嵌套列表设置以下默认样式。我们需要涵盖有序列表和无序列表及其组合。

ol li,
ul li {
  margin-bottom: 0.25em;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin: 0.25em 0 1em;
}

使用:is伪选择器,我们可以轻松地将这些选择器转换为单个表达式。

:is(ol,ul) li {
  margin-bottom: 0.25em;
}

:is(ol,ul) :is(ol,ul) {
  margin: 0.25em 0 1em;
}

https://codepen.io/smashingmag/pen/jOZMGvO

:where工作原理与 相同:is,但它将表达式的特异性降低到零。现在,为什么这很重要?让我们回到我们的示例并稍微更改一下标记。让我们添加一个.list选择器,这样我们就可以通过分配一个类来将样式添加到列表中。让我们为嵌套列表添加一个附加类,.list-highlight它添加背景颜色并调整填充和边距,因此嵌套列表看起来更加突出。

/* Default styles for nested lists */
.list :is(ol,ul) {
  margin: 0.25em 0 1em;
}

/* Utility class for a nested list */
.list-highlight  {
  background: #eeeeee;
  padding: 1em 1em 1em 2em;
  margin: 0.5em 0;
}

但是,当我们将list-highlightclass 应用于任何嵌套列表时,边距看起来会消失,因为该样式不适用。到底是怎么回事?

选择器的结果特异性:is匹配列表中最高的特异性。因此,我们的.list-highlightutil 类中的边距样式永远不会胜过它。

我们希望避免为我们的实用程序类增加特异性和添加依赖项,所以让我们切换:is一下:where,看看会发生什么。

.list :where(ol,ul) {
  /* ... */
}

https://codepen.io/smashingmag/pen/mdXrBzz

我们的实用程序类无需更高的特异性或其他覆盖即可工作!:where将列表中选择器的特异性设置为零,并允许我们覆盖默认样式。

我们可以使用:isand:where将多个选择器组合成一个表达式。使用:where,我们可以使用复杂的选择器设置安全的默认样式,这些选择器可以很容易地被简单的实用程序类覆盖,而不会不必要地增加特异性。

scroll-padding 

在实现固定页眉时,我最讨厌的一个问题是页面滚动链接如何导致固定页眉覆盖部分内容。我们必须使用 JavaScript 来解决这个问题并实现自定义滚动逻辑以考虑固定的标题偏移量。如果断点上的标头高度发生变化,事情只会变得更加复杂,所以我们也需要用 JavaScript 覆盖这些情况。

幸运的是,我们不必再依赖 JavaScript。我们可以scroll-padding-top使用标准 CSS 媒体查询来指定和更改它的值。

html {
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

https://codepen.io/smashingmag/pen/QWQKqzW

我们还可以设置其他方向或使用速记scroll-padding

scroll-padding: /* ... */;

scroll-padding-top: /* ... */;
scroll-padding-right: /* ... */;
scroll-padding-bottom: /* ... */;
scroll-padding-left: /* ... */;

字体渲染选项 

我最近在一个项目中为数值设置动画,其中一个值将从零增加到最终值。我注意到,由于各个字符具有不同的宽度,因此在动画过程中文本一直在左右跳跃。

Fira Sans 字体中的数值

请注意 Fira Sans 字体如何具有不同的数值字符宽度。(第二行多了一个字符)(大预览

我认为这个问题无法解决,然后我继续前进。社区民意调查中的一条推文建议我应该研究一下font-variant-numeric: tabular-nums,我惊讶地发现有太多影响字体渲染的选项。

例如,tabular-nums通过为所有数字字符设置相等的宽度来解决上述问题。

https://codepen.io/smashingmag/pen/ZErpayJ

请注意,可用功能取决于字体本身,并且可能不支持某些功能。有关选项的完整列表,请参阅文档。还有一个font-variant CSS 属性允许我们为所有字符激活更多功能,而不仅仅是数字。

以下是font-variant-numericSource Sans 3 字体中提供的更多示例。

https://codepen.io/smashingmag/pen/ExQgbvE

创建堆叠上下文isolate 

这个属性可能会让开发人员感到困惑,直到我阅读了Josh W. Comeauz-index关于堆栈上下文主题的精彩文章时我才意识到这一点。简而言之,它允许我们划分我们的z-index堆栈。

您可能遇到过这样的情况,例如,您在页面中添加了可重用的工具提示组件,却发现工具提示元素z-index比页面上的其他相邻元素低,导致工具提示显示在其下方。我们通常会通过增加z-index工具提示的值来解决它,但这可能会导致项目其他地方出现回归和类似问题。

这正是下面示例中发生的情况。出于演示目的,工具提示被锁定在悬停状态。

https://codepen.io/smashingmag/pen/ZErpaXX

让我们看看这里发生了什么。开发人员制作了一个样式化的标题组件,其背后有一个装饰元素,如设计中所定义的那样。但他们的z-index价值观太过分了:

  • 标题文字有z-index: 2
  • 装饰背景元素有一个z-index: 1.

该组件按预期工作,并与主代码库合并。过了一段时间后,其他人制作了一个带有z-index: 1. 没有理由为 分配更高的值z-index: 1,因为工具提示必须位于文本上方。过了一会儿,出现了一个边缘情况,标题文本结束在工具提示上方。

我们可以弄乱z-index标题组件和工具提示组件的值,或者将 a 分配z-index给它们各自的父元素position: relative以创建新的堆叠上下文,但我们依赖的是幻数!

让我们换个角度思考这个问题——如果我们可以创建一个新的堆栈上下文而不依赖于z-index幻数呢?这正是这样isolation: isolate做的!它创建一个新的堆叠上下文或组。它告诉浏览器不要混合这两个堆叠组,即使我们将标题z-index值增加到可能的最大值。因此,我们可以保持z-index较低的值,而不用担心值是否应该是 2、10、50、100、999999 等。

让我们在标题组件的根目录和工具提示组件的根目录创建一个新的堆叠上下文,看看会发生什么。

.title {
  isolation: isolate;
  /* ... */
}

.tooltip-root {
  isolation: isolate;
  /* ... */
}

https://codepen.io/smashingmag/pen/oNEzooJ

我们通过隔离两个相互冲突的组件的堆栈上下文来解决这个问题,而不会乱用z-index值的幻数。

即使我们为标题文本分配了一个不必要的高值(例如 99999),该值也不会影响另一个孤立的组——工具提示仍然会在标题上方结束,这使得我们的组件更加健壮和可重用。(大预览

  • 贝尔蒙特大学

渲染性能优化 

在渲染性能方面,在处理常规项目时很少遇到这些问题。但是,在具有数千个元素的大型 DOM 树或其他类似边缘情况下,我们可能会遇到一些与 CSS 和渲染相关的性能问题。幸运的是,我们有一种直接的方法来处理这些导致延迟、对用户输入无响应、低 FPS 等的性能问题。

这就是contain属性的用武之地。它告诉浏览器在渲染周期中什么不会改变,因此浏览器可以安全地跳过它。这可能会对布局和样式产生影响,因此请确保测试此属性是否不会引入任何视觉错误。

.container {
  /* child elements won't display outside of this container so only the contents of this container should be rendered*/
  contain: paint;
{

这个属性相当复杂,Rachel Andrew在她的文章中详细介绍了它。这个属性有点难以证明,因为它在那些非常特殊的边缘情况下最有用。例如,Johan Isaksson在他的文章中介绍了其中一个示例,他注意到 Google Search Console 上的滚动延迟很大。它是由页面上有超过 38 000 个元素引起的,并通过包含属性修复!

如您所见,contain依赖于开发人员确切知道哪些属性不会更改并知道如何避免潜在的回归。所以,安全地使用这个属性有点困难。

但是,有一个选项可以让浏览器contain自动应用所需的值。我们可以使用该content-visibility属性。有了这个属性,我们可以推迟屏幕外和首屏内容的渲染。有些人甚至将其称为“延迟渲染”。

Una Kravets 和 Vladimir Levin 在他们的旅游博客示例中介绍了这个属性。他们将以下类名应用于首屏博客部分。

.story {
  content-visibility: auto; /* Behaves like overflow: hidden; */
  contain-intrinsic-size: 100px 1000px;
}

使用contain-intrinsic-size,我们可以估计要渲染的部分的大小。如果没有此属性,内容的大小将为0,并且页面尺寸将随着内容的加载而不断增加。

回到 Una Kravets 和 Vladimir Levin 的旅游博客示例。请注意滚动条在滚动或拖动时是如何跳动的。contain-intrinsic-size这是因为设置的占位符(估计)大小与实际渲染大小之间存在差异。如果我们省略这个属性,滚动跳跃会更加刺耳。

https://codepen.io/smashingmag/pen/jOZMapm

Thijs Terluin 涵盖了几种计算此值的方法,包括 PHP 和 JavaScript。使用 PHP 的服务器端计算尤其令人印象深刻,因为它可以在更大的各种页面集上自动进行价值估计,并使其对屏幕尺寸的子集更加准确。

请记住,一旦出现问题,这些属性就应该用于解决问题,因此在遇到渲染性能问题之前可以安全地忽略它们。

结论 

CSS 不断发展,每年都会添加更多功能。跟上最新的功能和最佳实践很重要,但也要留意浏览器支持并使用渐进增强。

我确信这里没有包含更多的 CSS 属性和选择器。请随时在评论中告诉我们哪些属性或选择器鲜为人知或应该更频繁地使用,但可能有点令人费解或周围没有足够的嗡嗡声。 

来源:https ://www.smashingmagazine.com/2022/05/lesser-known-underused-css-features-2022/

#css

What is GEEK

Buddha Community

2022 年鲜为人知且未充分利用的 CSS 功能

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background