再见 IE

2022 年 6 月 16 日，Internet Explorer，俗称 IE，达到 EOL（End of Life）。

不出所料，我不认为今天在 IE10 之前我必须支持任何东西，但即便如此，一定有不少模式被称为“支持 IE11，因为 IE11 可以在 Windows 10 上运行”。
但是，当应用6月16日之后的更新时，IE甚至无法启动，所以我终于不用处理麻烦的IE支持了！似乎有很多人感到高兴。除了说支持IE的人是否会更新操作系统。可能你一开始没有使用Win10...

除了人们感谢创建 Polyfills 的 Javascript 之外，您基本上不能使用浏览器不支持 HTML 和 CSS 的功能。
IE 不支持，或者有 IE 特有的 bug 等。“非常好用但不能在IE中使用”因此，我不得不放弃许多 CSS 属性和 HTML 标签。
但是，由于我们最终（可能）可以分道扬镳了 IE 支持，所以我想介绍一些非常有用的 CSS 属性，我希望将来会越来越多地使用这些属性。
如果您能将它用于您未来的网络制作，我们将不胜感激。我没赶上 6 月 16 日，因为我把它放在一起的速度很慢，所以我不知道它酿造了多少次。

* 此页面在IE中无法正常查看！ ！ ！
我不认为有奇怪的人在 EOL 之后使用 IE 来查看 Qiita，但以防万一……

设计/装饰

使用 CSS 进行颜色混合 | mix-blend-mode

看笔混合模式由 Ryuji Sanagi (@transel) 上代码笔.

图层颜色混合是 Adob​​e 软件的基本功能之一，也可以与 CSS 一起使用。允许您指定两个不同颜色元素如何重叠的属性。
它是在 2015 年左右制定的，现在除了 IE 之外的所有主流浏览器都完全兼容。

在上面的示例中，我将彩色文本放置在图像中 position: absolute 和 z-index: -1 后面的图像中。当然，您也可以混合图像和图像。
上面的 codepen 只是部分示例，但其他各种规格也是可能的。这个网站解释的很详细，还有一个demo page可以尝试各种值。

这个属性的好处是图像当然是即使叠加在<video> 等视频或使用<canvas> 绘制的图形上也能正常工作地方。
只需在第一个视图中放置一个背景视频，然后用mix-blend-mode 覆盖标语文本，即可创建一个非常时尚的装饰。

如果想在 IE 中以同样的方式显示，则必须提前在 Illustrator 或 After Effects 中导出混合素材，所以不能用于视频背景，语义化程度不高，而且是响应式设计。需要有很多妥协可以使用。
这是我希望在未来积极使用的*** CSS 属性。

带有 CSS 的图像过滤器 | filter

看笔筛选由 Ryuji Sanagi (@transel) 上代码笔.

这也是一个图像属性。除了饱和度和亮度，您还可以应用模糊和更改不透明度。
例如，在悬停时很容易实现棕褐色或模糊图像等动作。
此外，filter: drop-shadow() 还支持 PNG 透明度，因此您可以为标志性的 PNG 图像添加自然阴影。

如果你想在IE中显示同样的方式，使用<canvas>，重叠两个图像并使用opacity使上图透明并带有动画等。前者在没有知识和经验的情况下需要大量的时间和精力，而后者往往会导致代码混乱和大量浪费。
我想有很多场合你想要对图像进行轻微处理，所以我想在以后好好利用这个属性。

仅使用 CSS 免费剪辑 | clip-path

看笔剪辑路径由 Ryuji Sanagi (@transel) 上代码笔.

可以使用 Adob​​e 软件执行熟悉的剪辑。它可以用于各种元素以及图像。
支持除 IE 之外的所有主要浏览器，但请注意 safari 需要供应商前缀 (-webkit-)。

圆形和椭圆有专用值，您可以通过使用polygon() 指定路径将它们裁剪为任何形状。剪辑可以在现场进行模拟，使用起来非常方便。
不仅可以使用百分比，还可以使用像素规格和calc() 等来指定值。您还可以使用带有 path() 的 SVG 路径定义来指定形状。
也可以结合:hover等进行动画处理。

以文字形式剪辑背景|Background-clip: text

看笔背景剪辑：文本由 Ryuji Sanagi (@transel) 上代码笔.

它用于iPhone和Mac的促销网站，所以很多人应该知道它。仅支持 Safari 和 FireFox 没有供应商前缀，所以使用时不要忘记添加-webkit-Background-clip: text。

您可以将背景裁剪为文本的形状，方法是设置图像等，将Background-image 设置为文本的背景，并使用Background-clip: text 进行设置。
实际上，背景元素被文本隐藏并且看不到，但是通过使用color: transparent 使文本透明，剪切的背景元素变得可见。

在上面的例子中，相同的图像叠加在文本元素和背景元素上，背景元素被模糊，并且设置了动画，使得当鼠标悬停时模糊消失，文本融入背景。
使用@keyframe 和javascript 与动画相结合，可以实现各种表达，您可以根据您的独创性大大扩展网站设计的范围。

带有 CSS 的边框文本 | -webkit-text-stroke

看笔-webkit-text-stroke由 Ryuji Sanagi (@transel) 上代码笔.

允许文本加边框的属性。使用时需要供应商前缀-webkit-。
好像还没有标准化的打算，所以在使用的时候要小心，不过目前除了IE以外的主流浏览器都支持。
-webkit-text-stroke-width 和 -webkit-text-stroke-color 可以单独指定。
虽然它是一个简单的属性，但它的用途却很广泛。

用 CSS 创建一个简单的饼图 | background: conic-gradient

看笔无标题由 Ryuji Sanagi (@transel) 上代码笔.

CSS3 渐变包括用于线性渐变的linear-gradient 和用于径向渐变的radial-gradient，但conic-gradient 是用于锥形渐变的属性。目前，除了IE之外的所有主流浏览器都完全兼容。
用法类似于radial-gradient等，可以通过指定起始角度、位置和颜色来创建渐变。

当然，既然是 CSS，你可以通过 @keyframes 结合其他属性来实现简单的动画。丰富的动画很难，但它可能对加载屏幕图标、背景等很有用。
此外，如果它是像示例这样的简单饼图，您可以使用<dl> 或<table> 标记来装饰它。

布局系统

background-image 没有了 | object-fit

看笔无标题由 Ryuji Sanagi (@transel) 上代码笔.

一个属性，可以指定如何显示替换元素，即图像或视频，用于<img> 或<video> 大小规范。
即使是很少支持 CSS3 和更高版本属性的 Opera mini，即使它需要供应商前缀，也可以。完全兼容除 IE 以外的所有主流浏览器正在做。
我记得说过我最终会实现它，但最后EOL 无支持看起来确实如此。

width height 当你想在保持height指定大小的父元素的纵横比的同时全框显示图像时，如果要支持IE，请为父元素指定背景图像@987654361 我别无选择，只能使用@。
如果只是一张图片，还可以，但如果是需要不定图片的幻灯片，那就麻烦了，灵活性也差，所以我用不上。

另外，当你想用<video>全屏显示背景视频时，如果你想支持IE，使用min-heightmin-width，并添加媒体查询。如果你使用987654366@，可以实现响应式支持和使用以下非常简单的代码实现无 JS。

html

<video src="exsample.webm" autoplay muted loop></video>

css

video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

文本布局的*** | CSS 形状

看笔CSS 形状通过 Transel (@transel) 上代码笔.

2014 年制定的一个相对较新的规范。现代浏览器完全兼容，但 safari 的完全支持是在 2016 年左右，所以如果您担心，请添加供应商前缀 -webkit-

它由三个属性shape-outside、shape-margin、shape-image-threshold 组成。你可以做什么如你看到的。您可以使用 CSS 在 Illustrator 中实现“文本换行”功能。

shape-outside和前面介绍的clip-path几乎一样，可以缠绕成各种形状。
shape-margin 指定从shape-outside 指定的换行线取多少边距。
使用shape-outside，您可以使用 png、gif 等从 Alpha 通道自动指定环绕区域。在这种情况下，您可以使用shape-image-threshold 设置整形的 Alpha 通道阈值。 （*图片的情况下，参考来源必须是同一个服务器，所以不能用Codepen复制。）

此外，Chrome 扩展程序CSS 形状编辑器允许您根据图像直观地定义多边形形状。
我不会详细介绍，但是在使用 CSS Shape 时它是一个非常有用的扩展，所以请利用它。

超级简单的网格布局|display: grid

看笔网格通过 Transel (@transel) 上代码笔.

CSS Grid 允许您在不破坏语义代码的情况下创建具有较高***度的布局。
现代浏览器支持是在 2014 年左右，但它是在 2007 年制定的。考虑到 Web 的历史，它是一个比较古老的属性，所以你们中的许多人可能对它很熟悉。
最初以为 Flexbox 可以到达痒的地方，但正如预期的那样，IE 充满了 bug（或者更确切地说，规范没有升级），所以在客户端工作等方面。这是一个经常被回避的不幸属性.

虽然类似于 HTML 中的<table> 元素，<table> 是一个标签，只能在描述表格时使用，不能用于装饰目的。
可以在保留 HTML 语义的同时使用网格布局这是display: grid最大的特点。

与display: flex不同的是，Flexbox可以指定一个方向，水平或垂直，虽然可以指定换行符，但只能指定“垂直位置/一行内的水平位置”。另一方面，display: grid是二维排列，不同的是可以纵横***排列。
Flexbox 是一维的，例如“我想将包装器中的所有块居中，同时保持文本对齐、列表等的边距。”它可以在这种情况下使用。
网格布局是“更改屏幕（页面）内的整体布局”我擅长
不是说哪一个更好，所以我们要根据情况好好利用它。

无边距的页面布局 | gap

看笔无标题通过 Transel (@transel) 上代码笔.

可以在 CSS Grid 和 Flexbox 中指定边距的属性。最初它只用于 Grid，但现在它也可以用于 Flex。
通过在 Grid 或 flex 容器元素中指定它，您可以指定项目的垂直和水平边距。如果要单独指定它们，可以使用row-gap 和column-gap 属性。

由于IE11根本不支持，只好用margin、padding和width计算单独的margin。
有 3 个水平列和 20px 边距，项目的数量是未定义的，但在 PC 上是左对齐和 4 个水平列。覆盖选择器......这已经是一个麻烦的任务，但如果你使用gap，你只需要指定item的纵横尺寸，所以代码很干净。
布局的灵活性会根据您是否知道而发生很大变化，所以我绝对想使用它。

不带 JS 跟随滚动 | position: sticky

见笔位置：粘性通过 Transel (@transel) 上代码笔.

根据滚动启用固定显示的属性。
position: relative 是一个位置规范，它保持 DOM 流上的位置并保持原始空间（元素适合的空间）。
position: absolute 和 position: fixed 是绝对位置引用，去掉了原来的空间，指定的位置就好像它是浮动的一样。
position: sticky 是“它一直停留在原始空间中，直到通过滚动到达指定位置，超过指定位置时遵循绝对位置标准。”这是一个结合了两者特点的运动。

由于其规范，它便于实现从中间开始的侧边栏和标题。如果没有 JS，不使用 position: sticky 就无法重现这种行为。

但是，仍然存在一些问题。
首先，如果带有position: sticky 的元素是容器中唯一的子元素，则效果不佳。
position: sticky由于其规范要求父元素的高度是浮动的，但是如果是唯一没有其他子元素的元素，父元素的高度=粘性元素的高度，所以浮动就输了。

作为另一个问题如果overflow在包括父元素的祖先元素中指定，它可能无法按预期工作有一个规范。小心，不仅隐藏，而且除了初始值（可见）之外的任何规范都可能导致它停止工作。
滚动容器和这个规范有关，但是会比较长，所以就省略了。这一页如果您有兴趣，请看一看。
老实说，我希望你能原谅我不工作只是做overflow: auto

只能用 HTML 实现的简单手风琴 | <details> <summary>

看笔细节和总结通过 Transel (@transel) 上代码笔.

出现在 HTML5 中的标签。所有主要的现代浏览器都可以工作，但 IE 不行。
<details> 是细节折叠元素, <summary> 是<details>元素内容摘要或标题由于是表示 的标签，因此可以说是手风琴或可折叠菜单的标签。

由于<summary> 标记具有在单击时打开父<details> 标记的功能，因此可以使用非常简单的HTML 很容易地实现一个简单的手风琴。
单击时，<details> 标签被赋予open 属性，因此 CSS 可以通过 open 的存在与否来确定它是打开还是关闭。

但是，制作动画需要一点努力。
<details> transition 适用于标签本身，但不适用于内部元素，因此您必须使用单独的包装器元素将其括起来。
尽管如此，当你关闭它时，你仍然会感到不协调，如果你想要丰富的外观，毕竟还是正常使用JS比较好……

其他

CSS中也可以使用变量|CSS variables

看笔CSS 变量通过 Transel (@transel) 上代码笔.

可以在 CSS = 变量中使用的自定义属性。不用说，它不能在 IE 中使用，但它是相对较新的，大约在 2018 年左右，它在现代浏览器中可用。

如果你使用 Sass 或 Scss，你需要 CSS 变量吗？可能有人会这么认为，但最大的受益者是我在哪里可以定义变量这才是重点。
就 Sass 而言，它始终是一种元语言，变量仅在编译时使用。因此，除非事先定义了变量，否则无法使用它，也不可能在某处的选择器中重新定义全局变量，然后全局重用。
自定义 CSS 属性可以在任何地方定义，并且在媒体查询中更改的变量将应用于所有媒体查询。

由于其性质，它在实现响应式设计时非常有用。此外，由于它是在 DOM 上定义的变量，当然可以通过 Javascript 调用它来更改它。
如果你用得好，它会非常有用，所以它是你要积极使用的功能。

我想移动以保持 iframe 等的纵横比 |aspect-ratio

看笔纵横比通过 Transel (@transel) 上代码笔.

顾名思义，此属性允许您指定纵横比。

响应式支持带来的纵横比问题。
有一个著名的老 hack 将 wrapper 元素的高度设置为 0 并使用padding-top 指定百分比，但它是对原来使用padding 的大修，所以这不是一个很好的方法。嗯。

该属性对于在保持纵横比的同时排列不同大小的子元素非常有用，例如 Flexbox 中的水平徽标。
结合前面介绍的object-fit，[不同尺寸的图像在最大100px宽和最大50px垂直范围内以最大尺寸横排显示，同时保持纵横比]…您甚至可以清除似乎让您头疼的规范。

但是，由于 safari 支持是最新的，ver15（于 2021 年 10 月发布），因此在引入它之前***等待一段时间。这是我想在几年内使用的房产。

在那之后，只有macOS兼容，几年后你能毫不犹豫地使用它吗？ | webp webm

webp 是图像，webm 是视频的开源格式。
相比jpg和mp4，图像质量相同，文件大小非常轻，可以实现网站的高速显示。由于 SEO 快速显示网站很重要，因此认为它会在未来普及。

然而，也safari（或 Apple OS）难以处理，Webp 仅支持 macOS 11.0 或更高版本，webm 仅支持 11.3 或更高版本。
此外，iOS 15“实验性”支持音频编解码器......实际上，显示“支持”的编解码器的音频文件根本无法播放所以这就像是不合规的。

也就是说，从网络的现状来看，苹果做出任何让步只是时间问题，所以几年后就可以毫不犹豫地使用它。

在最后

我将只写下我知道我通常在工作中使用的那些有好几...
大约在 EOL（6 月 16 日）前一周，我在工作之余慢慢整理东西，不知不觉中，距离 EOL 已经过去了两个月。

我这里总结的只是一点点，还有很多其他的方便的功能和规范，除了IE之外的现代浏览器都支持，有兴趣的可以去看看。因为我自己什么都不知道...

如果您能帮助我进行网络制作，我将不胜感激。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623102.html