2019 年 7 種驚人的新 CSS 技術

已發表: 2019-05-01

這是選擇 Web 開發作為職業選擇的正確時機。 就像網頁設計師一樣，網頁開發人員也著迷於嘗試新的 CSS 技術並突破 CSS 所能做的極限。

在這裡，我們將看看一些新的 CSS 技術和正在進入創意設計的整個規範。 您可以通過描述良好的 CSS 控制設計的幾乎任何方面。 此外，它可以通過更簡潔、更一致的代碼來增強更好的整體用戶體驗。

1. 首字母

首字母是一個 CSS 屬性，該屬性選擇元素的第一個字母並指定該字母佔據的行數。 大多數情況下，它用於印刷媒體和信息網站、新聞網站，其中段落的第一個字母遠高於其他內容。

initial-letter 屬性自動調整創建風格化首字下沉所需的行數和字體大小。 首字母批准以下值：

  • <number> 表示字母佔多少行不接受負值；
  • 如果您想重置值，如果它可以從級聯繼承並且沒有縮放效果應用於第一個字母，則 normal 很有用；
  • <integer> 確定字母在預設大小時應該下沉的行數。 值必須大於零，如果未指定值，則復制大小值，下限為最接近的正整數；

::first-letter pseudo-element可用於選擇將被格式化為首字母的字符。 ::first-letter pseudo-element不選擇具有 display: inline 的元素的第一個字母，但僅適用於具有顯示值為 block、table-cell、table-caption 或 list-item 的元素.

[xhtml]
<!DOCTYPE html>
<html>
<頭部>
<風格>
p {
字體系列：襯線；
字體大小：20px；
邊距底部：-15px；
}
h1 {
字體系列：無襯線；
字體大小：3.1em；
顏色：黑色;
}
身體 {
填充：10px；
}
分區 {
寬度：550 像素；
行高：25px；
}
p:first-of-type:first-letter {
背景顏色：黑色；
白顏色;
向左飄浮;
字體大小：50px；
右邊距：10px；
邊距頂部：7px；
填充：18px；
盒子陰影：0 0 10px -2px 黑色；
}
</style>
</head>
<正文>
<h1>關於首字母</h1>
<div>
<p>只有全身心投入到一項事業中，才能成為真正的大師。 因此，精通需要一個人的全部”</p>
<p>“對人類及其命運的關注必須始終構成所有技術努力的主要利益。永遠不要在你的圖表和方程式中忘記這一點”</p>
</div>
</正文>
</html>
[/xhtml]

Initial letter

2.可變字體

可變字體表示定義為 OpenType 規範的一部分的一組新功能，並允許字體文件在單個文件中包含字體的多種變體，稱為可變字體。 實際上，它允許您僅使用一個@font-face 引用來訪問字體文件中包含的變量。 此外，可變字體允許轉換字體樣式、自定義字體樣式和動畫等功能。使用可變字體的好處是您可以訪問所有可用樣式、粗細和寬度。

可變字體通過變化軸定義它們的變化，並且有 5 個標準軸：

  • 斜體：斜體軸的工作方式不同，因為它被啟用或禁用，沒有中間。 可以使用 font-style CSS 屬性設置該值。 此外，通過引入 font-synthesis: none，將防止瀏覽器意外應用變化軸和合成斜體。
  • wght：控製字體的粗細，可以使用 font-weight CSS 屬性設置該值。
  • wdth：控製字體的寬度，該值可以使用 font-width CSS 屬性設置。在 CSS 中使用 font-stretch 屬性，我們可以使用百分比值設置字體寬度，如果我們提供的值超出字體-編碼域，瀏覽器將字體設置為最接近的允許值。
  • opsz：optical sizing 是指改變字體的光學尺寸的做法，可以使用 CSS font-optical-sizing 設置該值。光學尺寸值會根據字體大小自動應用，但可以使用 font-variation 進行操作-settings。當使用 font-optical-sizing 時，允許的值為 auto 或 none，當使用 font-variation-settings 時，提供一個數值。
  • slnt：控製字體的傾斜度，該值可以使用 font-style CSS 屬性來設置。它是可變的，可以表示為一個數字範圍，這允許字體沿該軸在任何地方變化。

使用帶有@font-face 的可變字體– 在網絡上使用可變字體時，這涉及定義指示可變字體文件的@font-face 規則。這裡有2 個鏈接可以讓您找到可變字體：axis-praxis.org 和v -fonts.com。

[xhtml]
<!DOCTYPE html>
<html>
<頭部>
<title>關於可變字體</title>
</head>
<風格>
@字體臉{
font-family: 'Avenir 下一個變量';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') 格式('truetype');
}
html {
font-family: 'Avenir 下一個變量', sans-serif;
}
p {
字體變化設置：'wght' 630，'wdth' 88；
}
</style>
<正文>
<h1>關於可變字體</h1>
<h2>關於可變字體</h2>
<p>
“任何聰明的傻瓜都可以讓事情變得更大更複雜……這需要一點天才——以及朝著相反方向前進的巨大勇氣。”
</p>
</正文>
</html>
[/xhtml]

Variablefonts

3. 邏輯屬性和值

邏輯屬性和值是一個 CSS 模塊，它引入了邏輯屬性和值，可以通過邏輯方向和維度映射來控制外觀。邏輯屬性和值使用塊和內聯等術語來描述它們流動的方向。邏輯屬性和值規範描述了物理值在其邏輯關係中的映射。

內聯尺寸 - 是以所使用的書寫類型書寫文本行的尺寸。 所以，在一個隨機的英文文檔中，文本是水平的，從左到右，在另一個阿拉伯語文檔中，書寫也是水平的，但是從右到左，如果我們考慮到一個日語文檔，內聯維度現在是垂直的，因為書寫模式垂直運行。

塊維度 - 對應於塊在頁面上的顯示順序。 在英語和阿拉伯語中，它們是垂直執行的，而在任何垂直書寫模式下，它們都是水平執行的。

[xhtml]
<!DOCTYPE html>
<html>
<頭部>
<風格>
html {
字體：20px 無襯線；
}
身體 {
填充：25px；
背景顏色：淡黃色；
顏色：黑色;
}
。盒子 {
邊框：4px純黑色；
邊框半徑：20px；
填充：20px；
邊距：12px；
}
。一 {
塊大小：100px；
內聯尺寸：200px；
}
。二 {
高度：100px；
寬度：200px；
}
</style>
</head>
<正文>
</div>
<div id="容器">
<div class="框一">
我的塊大小是 100 像素，我的內聯大小是 200 像素。
</div>
<div class="框二">
我的高度是 100 像素，寬度是 200 像素。
</div>
</div>
</正文>
</html>
[/xhtml]

Logical properties and values

4. 滾動捕捉

scroll-snap-type CSS 屬性決定了將附加點應用於滾動容器的剛性。換句話說，它在用戶完成滾動後將視口鎖定到某些元素或位置。這是顯示圖像庫的絕佳方式.以前，它可以與 JavaScript 一起使用，但是由於新的 CSS Scroll Snap 模塊，可以在 CSS 中控制效果。滾動捕捉是通過定義父/容器元素和容器中的子元素來完成的，容器中將根據在容器中定義的規則。滾動捕捉類型屬性是適用於容器元素的最重要的屬性。定義滾動捕捉軸 x、y、塊、內聯或兩者以及滾動捕捉嚴格性無、接近或強制。

[xhtml]
<!DOCTYPE html>
<html>
<頭部>
<風格>
html，正文，.C {
高度：50%；
}
。C {
顯示：彎曲；
對齊項目：居中；
justify-content: 之間的空格；
flex-flow：列 nowrap；
字體系列：arial；
}
。容器 {
顯示：彎曲；
彈性：無；
溢出：自動
}
.container.x {
寬度：70%；
高度：150px；
彈性流：行 nowrap；
}
.container.y {
寬度：256px；
高度：256px；
flex-flow：列 nowrap；
}
.y.mandatory-scroll-snapping {
滾動快照類型：y 強制；
}
.x.proximity-scroll-snapping {
滾動快照類型：x 接近度；
}
.container > div {
文本對齊：居中；
滾動對齊：居中；
彈性：無；
}
.x.container> div {
行高：128px；
字體大小：64px；
寬度：100%；
高度：128px；
}
.y.container> div {
行高：256px；
字體大小：128px；
寬度：256px；
高度：256px；
}
.y.container>div:{
行高：1.4；
字體大小：80px；
}
.container >div:{
背景顏色：白色；
}
.container >div:{
背景顏色：白色；
}
</style>
</head>
<正文>
<div class=".C">
<div class="container x 強制滾動捕捉" dir="ltr">
<div>滾動捕捉</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y 強制滾動捕捉" dir="ltr">
<div>關於 Scropp 捕捉</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</正文>
</html>
[/xhtml]

Scroll snapping

5. 網格級別 2 和子網格

2 級規範包含 1 級中的所有內容和一些新功能。 網格規範的第 2 級創建了 CSS 網格的子網格功能。在接下來的幾行中，我們將查看子網格功能，因為它目前在 Grid Level 2 的編輯草案中有詳細說明。因此，您可以在使用時製作網格網格佈局選項，可以通過在其上設置 display: grid 將網格元素轉換為網格容器。在下面的示例中，我有一個包含網格的 3 列軌道的項目，是一個具有 3 列軌道的容器網格，並且這些不符合父母的軌道。

[xhtml]
<!DOCTYPE html>
<html>
<頭部>
<title>CSS Grid Level 2 – subgrid</title>
</head>
<風格>
身體 {
邊距：20px；
}
。一 {
背景顏色：黑色；
白顏色;
邊框半徑：20px；
填充：20px；
字體大小：120%；
}
.A .one {
背景顏色：淺灰色；
}
。網格 {
顯示：網格；
網格間隙：10px；
網格模板列：3fr 1.5fr 2fr 1fr 1fr 2fr；
背景顏色：白色；
顏色：黑色;
邊距：1.5em 0；
}
。一種 {
填充：0；
網格間隙：15px；
網格列：自動/跨度 4；
顯示：網格；
網格模板列：3fr 1.5fr 1.5fr；
}
</style>
<正文>
<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>
</正文>
</html>
[/xhtml]

Grid level 2 and subgrid

作為一個開源項目，您可以在 GitHub 上看到 CSS 小組的工作進展情況。 瀏覽器規範和實現的發展是一個循環過程。 因此，您可以查看此子網格功能的進展情況以及新興的瀏覽器實現。

6. 使用 CSS 測試瀏覽器支持

CSS 開發了一種方法來測試瀏覽器對新功能的支持。 基本上，問一個問題來確定瀏覽器是否接受特定的 CSS 功能。 這種方式使得新特性的使用安全簡潔。在使用任何新的 CSS 特性時，您需要檢查瀏覽器是否支持該特性。關於這一行，建議您查閱 caniuse.com 上的數據，其中您可以導入您所在位置的數據。

Use CSS to test browser support

@supports CSS 允許您指定依賴於瀏覽器對 CSS 功能的支持的聲明，這稱為功能查詢。 該規則可以寫在代碼的頂部，也可以嵌套在任何其他條件組中。

[CSS]
@supports（顯示：網格）{
分區 {
顯示：網格；
}
}
[/css]

7. 媒體查詢的語法改進——第 4 級

Media Queries Level 4 規範包含對語法的一些改進，以使用具有範圍類型（例如高度和寬度）的功能進行媒體查詢。

為了舉例說明，我們使用最大功能來表示寬度

[CSS]
@media（最大寬度：20em）
[/css]

我們可以使用 min- 和 max- 嘗試兩個隨機值之間的寬度

[CSS]
@media（最小寬度：20em）和（最大寬度：35em）
[/css]

為了更好的理解，上例中我們想說寬度大於等於20em小於等於35em

結論

網站開發人員應該了解任何新的 CSS 技術並將其應用到未來的項目中。 他們將提高工作標準，客戶將對改進的網站外觀感到滿意。