每一個前端都須要知道這些面向將來的CSS技術

時間  2021-08-12
標籤 css html 前端 web windows 跨域 瀏覽器 markdown svg 函數 欄目 CSS 简体版
原文   原文鏈接

寫在前面

前端技術突飛猛進，咱們須要不斷學習來更新本身的前端知識並運用到本身的項目中。此次筆者整理一些將來普及或者如今同窗們可能已經用到的CSS特性，包括SVG圖標、滾動特性、CSS自定義屬性、CSS現代僞類 、JS in CSS、Web Layout、混合模式和濾鏡、CSS計數器等等。css

滾動特性

在能用CSS實現的就不用麻煩JavaScript文章說起到滾動捕捉的特性，更多有關於容器滾動方面的CSS新特性其實還有有不少個，好比：html

  • 自定義滾動條的外觀
  • scroll-behavior指容容器滾動行爲，讓滾動效果更絲滑
  • overscroll-behavior優化滾動邊界，特別是能夠幫助咱們滾動的穿透

自定義滾動條的外觀

默認的window外觀和mac外觀前端

windows image.png macweb

image.png

在CSS中，咱們可使用-webkit-scrollbar來自定義滾動條的外觀。該屬性提供了七個僞元素：windows

  • ::-webkit-scrollbar：整個滾動條
  • ::-webkit-scrollbar-button：滾動條上的按鈕（下下箭頭）
  • ::-webkit-scrollbar-thumb：滾動條上的滾動滑塊
  • ::-webkit-scrollbar-track：滾動條軌道
  • ::-webkit-scrollbar-track-piece：滾動條沒有滑塊的軌道部分
  • ::-webkit-scrollbar-corner：當同時有垂直和水平滾動條時交匯的部分
  • ::-webkit-resizer：某些元素的交匯部分的部分樣式（相似textarea的可拖動按鈕）
html {
    --maxWidth:1284px;
    scrollbar-color: linear-gradient(to bottom,#ff8a00,#da1b60);
    scrollbar-width: 30px;
    background: #100e17;
    color: #fff;
    overflow-x: hidden
}

html::-webkit-scrollbar {
    width: 30px;
    height: 30px
}

html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
    background: linear-gradient(to bottom,#ff8a00,#da1b60);
    border-radius: 30px;
    -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);
    box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)
}

html::-webkit-scrollbar-track {
    background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17)
}
複製代碼

經過這幾個僞元素，能夠實現你本身喜歡的滾動條外觀效果，好比下面這個示例：跨域

image.png

完整演示瀏覽器

css自定義屬性

你大概已經據說過CSS自定義屬性，也被稱爲 CSS 變量，估計熟悉SCSS、LESS就會很快上手，概念大同小異，都是讓咱們的CSS變得可維護，目前Edge最新版都已經支持這個特性了，這說明如今 CSS 自定義屬性已經能用在實際項目中了，相信不久之後開發者們將大大依賴這個特性。但還請在使用以前請先檢查一下本文附錄中 Postcss 對於 CSS 自定義屬性的支持狀況，以便作好兼容。markdown

什麼是自定義屬性呢？簡單來講就是一種開發者能夠自主命名和使用的 CSS 屬性。瀏覽器在處理像 color 、position 這樣的屬性時，須要接收特定的屬性值，而自定義屬性，在開發者賦予它屬性值以前，它是沒有意義的。因此要怎麼給 CSS 自定義屬性賦值呢？這倒和習慣無異svg

.foo {
  color: red;
  --theme-color: gray;
}
複製代碼

自定義元素的定義由 -- 開頭，這樣瀏覽器可以區分自定義屬性和原生屬性，從而將它倆分開處理。假如只是定義了一個自定義元素和它的屬性值，瀏覽器是不會作出反應的。如上面的代碼， .foo 的字體顏色由 color 決定，但 --theme-color 對 .foo 沒有做用。函數

你能夠用 CSS 自定義元素存儲任意有效的 CSS 屬性值

.foo {
  --theme-color: blue;
  --spacer-width: 8px;
  --favorite-number: 3;
  --greeting: "Hey, what's up?";
  --reusable-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.85);
}
複製代碼

使用

假如自定義屬性只能用於設值，那也太沒用了點。至少，瀏覽器得能獲取到它們的屬性值。

使用 var() 方法就能實現：

.button {
  background-color: var(--theme-color);
}
複製代碼

下面這段代碼中，咱們將 .button 的 background-color 屬性值賦值爲 --theme-color 的值。這例子看起來自定義屬性也沒什麼了不得的嘛，但這是一個硬編碼的狀況。你有沒有意識到，--theme-color 的屬性值是能夠用在任意選擇器和屬性上的呢？這可就厲害了。

.button {
  background-color: var(--theme-color);
}
 
.title {
  color: var(--theme-color);
}
 
.image-grid > .image {
  border-color: var(--theme-color);
}
複製代碼

缺省值

若是開發者並無定義過 --theme-color 這個變量呢？var() 能夠接收第二個參數做爲缺省值：

.button {
  background-color: var(--theme-color, gray);
}
複製代碼

注意：若是你想把另外一個自定義屬性做爲缺省值，語法應該是 background-color: var(--theme-color, var(--fallback-color))

傳參數時老是傳入一個缺省值是一個好習慣，特別是在構建 web components 的時候。爲了讓你的頁面在不支持自定義屬性的瀏覽器上正常顯示，別忘了加上兼容代碼：

.button {
  background-color: gray;
  background-color: var(--theme-color, gray);
}
複製代碼

CSS現代僞類

這些最新的僞類特性，咱們也須要知道。 image.png

使用 :is() 減小重複

你可使用 :is() 僞類來刪除選擇器列表中的重複項。

/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover {
  opacity: 1;
}

/* AFTER */
:is(.embed, .attachment) .save-button:hover {
  opacity: 1;
}
複製代碼

此功能主要在未處理的標準CSS代碼中有用。若是使用Sass或相似的CSS預處理程序，則可能更喜歡嵌套。

注意：瀏覽器還支持非標準的 :-webkit-any() 和 :-moz-any() 僞類，它們與 :is() 類似，但限制更多。WebKit在2015年棄用了 :-webkit-any() ，Mozilla已將Firefox的用戶代理樣式表更新爲使用 :is() 而不是 :-moz-any()。

使用 :where() 來保持低特殊性

:where() 僞類與 :is() 具備相同的語法和功能。它們之間的惟一區別是 :where() 不會增長總體選擇器的特殊性（即某條CSS規則特殊性越高，它的樣式越優先被採用）。

:where() 僞類及其任何參數都不對選擇器的特殊性有所幫助，它的特殊性始終爲零

此功能對於應易於覆蓋的樣式頗有用。例如，基本樣式表 sanitize.css 包含如下樣式規則，若是缺乏 <svg fill> 屬性，該規則將設置默認的填充顏色：

svg:not([fill]) {
  fill: currentColor;
}
複製代碼

因爲其較高的特殊性（B = 1，C = 1），網站沒法使用單個類選擇器（B = 1）覆蓋此聲明，而且被迫添加 !important 或人爲地提升選擇器的特殊性（例如 .share- icon.share-icon）。

.share-icon {
  fill: blue; /* 因爲特殊性較低，所以不適用 */
}
複製代碼

CSS庫和基礎樣式表能夠經過用 :where() 包裝它們的屬性選擇器來避免這個問題，以保持整個選擇器的低特殊性(C=1)。

/* sanitize.css */
svg:where(:not([fill])) {
  fill: currentColor;
}

/* author stylesheet */
.share-icon {
  fill: blue; /* 因爲特殊性較高，適用 */
}
複製代碼

其它新僞類特性有情趣同窗能夠按照導圖查閱一下相關文檔資料。

完整演示

JS in CSS

前面提到過，使用CSS自定義屬性的時候，能夠經過JavaScript來操做自定義屬性的值。其實還能夠更強大一點，若是你對CSS Houdini熟悉的話，能夠藉助其特性，直接在CSS的代碼中來操做CSS自定義屬性

:root {
  --property: document.write('hello world!');
}
複製代碼
window.onload = () => {
  const doc = window.getComputedStyle(document.documentElement);
  const cssProp = doc.getPropertyValue('--property');
  new Function((cssProp))();
}
複製代碼

完整演示

Web layout

對於Web佈局而言，前端就一直在探討這方面的最優方式。早期的table佈局，接着的float和position相關的佈局，多列布局，Flexbox佈局和Grid佈局等。Flexbox和Grid的出現，Web佈局的靈活性愈來愈高。

如圖不依賴媒體查詢實現自動計算

屏幕錄製2021-07-27 下午3.17.46.gif

CSS Grid中提供了不少強大的特性，好比：

  • fr單位，能夠很好的幫助咱們來計算容器可用空間
  • repeat()函數，容許咱們給網格多個列指定相同的值。它也接受兩個值：重複的次婁和重複的值
  • minmax()函數，可以讓咱們用最簡單的CSS控制網格軌道的大小，其包括一個最小值和一個最大值
  • auto-fill和auto-fit，配合repeat()函數使用，能夠用來替代重複次數，能夠根據每列的寬度靈活的改變網格的列數
  • max-content和min-content，能夠根據單元格的內容來肯定列的寬度
  • grid-suto-flow，能夠更好的讓CSS Grid佈局時能自動排列

結合這些功能點，佈局會變得更輕鬆。好比咱們要實現一個響應式的佈局，不少時候都會依賴於媒體查詢（@media）來處理，事實上，有了CSS Grid Layout以後，這一切變得更爲簡單，不須要依賴任何媒體查詢就能夠很好的實現響應式的佈局。特別是當今這個時代，要面對的終端設備只會增長不會減小，那麼但願佈局更容易的適配這些終端的佈局，那麼CSS Grid Layout將會起到很大的做用。

完整示例

Grid和flex都是面向將來的最佳佈局方案。咱們不該該探討誰優誰劣，而是應該取長補短結合使用。

混合模式和濾鏡

能用CSS實現的就不用麻煩JavaScript — Part2一文提到混合模式。CSS混合模式和濾鏡主要是用來處理圖片的。熟悉PS之類軟件的同窗很容易理解裏面的屬性。

屏幕錄製2021-07-19 上午11.12.39.gif

完整代碼演示

CSS計數器

CSS計數器其實涉及到三個屬性：counter-increment、counter-reset和counter()。通常狀況都是配合CSS的僞元素::before和::after的content一塊兒使用。能夠用來計數

屏幕錄製2021-07-27 下午3.15.06.gif

完整演示

SVG圖標

對於SVG而言，它是一套獨立而又成熟的體系，也有本身的相關規範（Scalable Vecgtor Graphics 2），即 SVG2。雖然該規範已經存在好久了，但不少有關於SVG相關的特性在不一樣的瀏覽器中獲得的支持度也是有所不一致的。特別是SVG中的漸變和濾鏡相關的特性。不過，隨着技術的革新，在Web的應用當中SVG的使用愈來愈多，特別是SVG 圖標相關的方面的運用。

  • 最先經過<img>標籤來引用圖標（每一個圖標一個文件）

  • 爲了節省請求，提出了Sprites的概念，即將多個圖標合併在一塊兒，使用一個圖片文件，藉助background相關的屬性來實現圖標

  • 圖片畢竟是位圖，面對多種設備終端，或者說更易於控制圖標顏色和大小，開始在使用Icon Font來製做Web圖標

  • 固然，字體圖標是解決了很多問題，但每次針對不一樣的圖標的使用，須要自定義字體，也要加載相應的字體文件，相應的也帶了必定的問題，好比說跨域問題，字體加載問題

  • 隨着SVG的支持力度愈來愈強，你們開始在思考SVG，使用SVG來製做圖標。該技術能解決咱們前面碰到的大部分問題，特別是在而對衆多終端設備的時候，它的優點愈加明顯

  • SVG和img有點相似，咱們也能夠藉助<symbol>標籤和<use>標籤，將全部的SVG圖標拼接在一塊兒，有點相似於Sprites的技術，只不過在此稱爲SVG Sprites

<!-- HTML -->
<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="half-circle" viewBox="0 0 106 57">...</symbol>
    <!-- .... -->
    <symbol id="icon-burger" viewBox="0 0 24 24">...</symbol>
</svg>
複製代碼

SVG Sprites和img Sprites有所不一樣，SVG Sprites就是一些代碼（相似於HTML同樣），估計沒有接觸過的同窗會問，SVG Sprites對應的代碼怎麼來獲取呢？其實很簡單，能夠藉助一些設計軟件來完成，好比Sketch。固然也可使用一些構建工具，好比說svg-sprite。有了這個以後，在該使用的地方，使用<use>標籤，指定<symbol>中相應的id值便可，好比：

<svg class="icon-nav-articles" width="26px" height="26px">
    <use xlink:href="#icon-nav-articles"></use>
</svg>
複製代碼

使用SVG的圖標還有一優點，咱們能夠在CSS中直接經過代碼來控制圖標的顏色：

.site-header .main-nav .main-sections>li>a>svg {
    // ...
    fill: none;
    stroke-width: 2;
    stroke: #c2c2c2;
}
.site-header .main-nav:hover>ul>li:nth-child(1) svg {
    stroke: #ff8a00;
}
複製代碼

image.png

完整演示

寫在最後

以上列舉都是CSS一些優秀的特性。還有不少，有時間再收集更多分享給你們。這些新特性在不一樣的瀏覽器中差別性是有所不一樣的。但這並非阻礙咱們去學習和探索的緣由所在。咱們應該及時去了解並運用到，才能夠作到對項目精益求精。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程