2020 年网页设计最新 CSS 属性和 API-css教程-PHP中文网

首页

web前端

css教程

2020 年网页设计最新 CSS 属性和 API

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 08, 2023 pm 02:53 PM

为了帮助开发人员混合使用 JavaScript 和 CSS 自定义网站，我们开发了新的 CSS 属性，现在支持流行的浏览器。下面列出了其中一些 -

focus-within

它旨在解决元素内的焦点可访问性

scroll-snap

这可以实现原生滚动和减速

@media(prefers-*)

帮助根据用户的设备偏好设置页面的 UI 和 UX，从而实现更高级别的个性化.

* 可以表示亮度、强制颜色、配色方案、对比度、减少运动和减少透明度

位置：粘性

到将 UI 保持在视口内。

具有标准布局的逻辑属性

允许我们在元素内部和周围拥有动态方向间距。

gap 属性

此属性现在可用于 Flexbox。间隙将容器设置为拥有间距，而不是让每个子元素都有自己的间距。

backfrop-filter

用于方便地设置元素后面的样式。

CSS Houdini API

一种低级 API，使开发人员能够告诉浏览器他们希望如何阅读和理解自定义 CSS。开发人员现在可以通过更易于使用的方式访问 CSS 对象模型。布局 API、Paint API、Parser API、Properties & Values API、AnimationWorklet、Typed OM 和 Font Metrics API 均属于此范围。

宽高比

维护媒体尺寸

size

在一个属性中设置高度和宽度

min()、max()和clamp()

对任何CSS属性设置约束

显示：外部内部

双值语法可以更好地适应元素

list-style-type

向列表添加自定义样式

CSS 模块

我们现在可以使用 JavaScript 从本地或远程文件请求特定模块

CSS 区域

填充区域带有内容

CSS子网格

帮助我们在CSS网格中使用微布局创建微布局。

示例

以下示例显示其中一些属性 -

实时演示

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
   text-align: center;
}
:is(header, main, footer) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:matches(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>

输出

这将产生以下结果 -

2020 年网页设计最新 CSS 属性和 API

示例

现场演示

<html>
<head>
<style>
#parent {
   margin: 8%;
   background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
   padding: 2%;
   width: 200px;
   height: 200px;
   box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
   margin-top: 20vh;
   backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2 id="Watch-this-cool-effect">Watch this cool effect</h2>
</div>
</div>
</body>

输出

这将产生以下结果 -

2020 年网页设计最新 CSS 属性和 API

以上是2020 年网页设计最新 CSS 属性和 API的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

使用页面CMS进行静态站点内容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的内容管理系统选项可用，而我进行了几个测试，但实际上没有一个是一个，y＆＃039;知道吗？怪异的定价模型，艰难的自定义，有些甚至最终成为整个＆

链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接，如。4)确保正确使用文件路径和CSS文件加载顺序，优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学（或我如何优化CSS KeyFrames动画）May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的？约翰·瑞亚（John Rhea）挑选了他写的一个旧的CSS动画，并介绍了优化它的思维过程。

CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingmatematingmultationmatingMultationPropertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用BombingingWithjavofofofofofoffo

See all articles