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> 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> 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> 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> 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> 作为一个开源项目,您可以在GitHub上看到CSS组中的工作如何发展。浏览器规范和实现的开发是一个循环过程。因此,您可以了解此子网格功能的进展情况以及新兴浏览器实现的情况。 6.使用CSS测试浏览器支持 CSS开发了一种测试浏览器对新功能支持的方法。基本上,提出问题以确定浏览器是否接受特定的CSS功能。这种方式使新功能以安全和简洁的方式使用。当使用任何新的CSS功能时,您需要检查浏览器是否支持该功能。在这一行中,建议您查阅caniuse.com上的数据,其中您可以导入您所在位置的数据。 @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技术并将其应用于未来的项目中。他们将提高他们的工作标准,客户将对改进的网站外观感到满意。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 2019年7款让人耳目一新又很好用的的新CSS技术
分享到:
赞(0)
广告位820*80