1. 云图网首页
  2. 技术专区
  3. 编程教程

2019年7款让人耳目一新又很好用的的新CSS技术

• 编程教程

现在是选择Web开发作为职业选择的合适时机。就像网页设计师一样，网页开发人员也着迷于尝试新CSS技术的方法，并突破了CSS可以做的限制。

在这里，我们将介绍一些新的CSS技术和整个规范，这些技术正在进入创意设计。您可以通过描述良好的CSS控制设计的几乎任何方面。此外，它可以通过更清晰，更一致的代码增强整体用户体验。

1.首字母

首字母是一个CSS属性，该属性选择元素的第一个字母并指定字母占用的行数。大多数情况下，它用于印刷媒体和信息网站，新闻网站，其中段落的第一个字母比其他内容高得多。

initial-letter属性会自动调整创建风格化首字下沉所需的行数和字体大小。首字母批准以下值：

  • <number>指的是字母占用的行数，其中不接受负值;
  • 如果要重置值，如果它可以从级联继承并且没有应用于第一个字母的缩放效果，则normal是有用的;
  • <integer>确定字母在预设大小时应下沉的行数。值必须大于零，如果未指定该值，则重复大小值，将其覆盖到最接近的正整数;

该::first-letter pseudo-element可用于选择将被格式化为一个字母字符。在::first-letter pseudo-element不选择具有显示元件的第一个字母：内联，但只适用于有块，表芯，表标题，或列表项的显示值的元素。

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

2019年7款让人耳目一新又很好用的的新CSS技术

2.可变字体

可变字体表示作为OpenType规范的一部分定义的一组新功能，允许字体文件在单个文件中包含多种字体变体，称为变量字体。实际上，它允许您只使用一个@ font-face引用来访问字体文件中包含的变量。此外，可变字体允许转换字体样式，自定义字体样式和动画等功能。使用可变字体的好处是您可以访问所有可用样式，重量和宽度。

可变字体通过变化轴定义它们的变化，有5个标准轴：

  • ital：斜体轴的工作方式不同，因为它已启用或禁用，中间没有。可以使用font-style CSS属性设置该值。此外，通过引入font-synthesis：none，将阻止浏览器意外地应用变化轴和合成斜体。
  • wght：控制字体的权重，可以使用font-weight CSS属性设置值。
  • wdth：控制字体的宽度，可以使用font-width CSS属性设置值。在CSS中使用font-stretch属性，我们可以设置字体宽度为百分比值，如果我们提供的字体超出字体 – 在编码域中，浏览器使字体处于最接近的允许值。
  • opsz：光学尺寸是指改变字体光学尺寸的实践，可以使用CSS字体光学尺寸设置值。光学尺寸值根据字体大小自动应用，但可以使用字体变化进行操作-settings.When使用font-optical-sizing时，允许的值为auto或none，使用font-variation-settings时，会提供数值。
  • slnt：控制字体的倾斜度，并且可以使用字体样式的CSS属性设置值。它可以通过表示为数字范围来变量，这允许字体沿着该轴的任何位置变化。

使用@ font-face的可变字体 – 在Web上使用可变字体时，这涉及定义指示可变字体文件的@ font-face规则。这里有2个链接，允许您查找可变字体：axis-praxis.org和v -fonts.com。

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
  font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
  font-family: 'Avenir Next Variable', sans-serif;
}
p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

2019年7款让人耳目一新又很好用的的新CSS技术

3.逻辑属性和值

逻辑属性和值是一个CSS模块，它引入了逻辑属性和值，可以通过逻辑方向和维度映射来控制外观。逻辑属性和值使用块和内联等术语来描述它们流动的方向。逻辑属性和值规范表征其逻辑关系中物理值的映射。

内联维度 – 是在所使用的书写类型中写入文本行的维度。因此，在一个随机的英文文档中，文本是水平的，从左到右，在另一个阿拉伯文档中，写作也是水平的，但从右到左，如果我们考虑到日文文档，内联维度现在是垂直的，因为写作模式垂直运行。

块尺寸 – 对应于块在页面上显示的顺序。在英语和阿拉伯语中，它们是垂直执行的，而在任何垂直书写模式下它们都是水平执行的。

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

2019年7款让人耳目一新又很好用的的新CSS技术

4.滚动捕捉

scroll-snap-type CSS属性确定了附加点应用于滚动容器的刚性。换句话说，它在用户完成滚动后将视口锁定到某些元素或位置。这是显示图像库的绝佳方式。以前，它可以与JavaScript一起使用，但是由于新的CSS Scroll Snap模块，可以在CSS中控制效果。通过定义容器中的父/容器元素和子元素来完成捕捉。容器中定义的规则.Sroll-snap-type属性是应用于容器元素的最重要的属性。定义滚动捕捉轴x，y，块，内联或两者以及滚动快照严格性无，接近或强制。

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

2019年7款让人耳目一新又很好用的的新CSS技术

5.网格级别2和子网格

2级规范包含1级中的所有内容和一些新功能。网格规范的第2级创建了CSS Grid的子网格特征。在以下几行中，我们将查看子网格特征，因为它目前在编辑器的网格级别2草案中有详细说明。因此，您可以在使用时生成网格。网格布局选项，网格元素可以通过在其上设置display：grid来转换为网格容器。在下面的示例中，我有一个包含3个列网格轨道的项目，是一个包含3个列轨道的容器网格，以及这些不与父母的曲目对齐。

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="one A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>

2019年7款让人耳目一新又很好用的的新CSS技术

作为一个开源项目，您可以在GitHub上看到CSS组中的工作如何发展。浏览器规范和实现的开发是一个循环过程。因此，您可以了解此子网格功能的进展情况以及新兴浏览器实现的情况。

6.使用CSS测试浏览器支持

CSS开发了一种测试浏览器对新功能支持的方法。基本上，提出问题以确定浏览器是否接受特定的CSS功能。这种方式使新功能以安全和简洁的方式使用。当使用任何新的CSS功能时，您需要检查浏览器是否支持该功能。在这一行中，建议您查阅caniuse.com上的数据，其中您可以导入您所在位置的数据。

2019年7款让人耳目一新又很好用的的新CSS技术

@supports CSS允许您指定依赖于浏览器对CSS功能的支持的声明，这称为功能查询。此规则可以写在代码的顶部，也可以嵌套在任何其他条件组中。

@supports (display: grid) {
  div {
    display: grid;
  }
}

7.媒体查询的语法改进 – 级别4

“媒体查询级别4”规范包含对语法的一些改进，以使用具有范围类型（​​如高度和宽度）的要素进行媒体查询。

举例来说，我们使用max-functional作为宽度

@media (max-width: 20em)

我们可以使用min-和max-来尝试两个随机值之间的宽度

@media (min-width: 20em) and (max-width: 35em)

为了更好地理解，在上面的例子中我们想说宽度大于或等于20em且小于或等于35em

结论

网站开发人员应该了解任何新的CSS技术并将其应用于未来的项目中。他们将提高他们的工作标准，客户将对改进的网站外观感到满意。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/262167.html

赞 (0)
0
上一篇 2022年5月25日
下一篇 2022年5月25日

相关推荐

发表回复

登录后才能评论