愛上朴實的CSS細節

来源:http://www.cnblogs.com/qianduantuanzhang/archive/2017/10/30/7756826.html
-Advertisement-
Play Games

英文原文:Learning to Love the Boring Bits of CSS 未來的CSS太讓人興奮了:一方面,是全新的頁面佈局方式;另一方面,是酷炫的濾鏡、顏色等視覺效果。這些CSS,受開發者追捧,被雜誌和博客文章鋪天蓋地地介紹。 如果說這些特性是CSS華麗的一面,那我們來看看它朴實的 ...


英文原文:Learning to Love the Boring Bits of CSS 
  未來的CSS太讓人興奮了:一方面,是全新的頁面佈局方式;另一方面,是酷炫的濾鏡、顏色等視覺效果。這些CSS,受開發者追捧,被雜誌和博客文章鋪天蓋地地介紹。 
  如果說這些特性是CSS華麗的一面,那我們來看看它朴實的一面:很不起眼的東西,如選擇器、單位、函數(方法)。我經常說這是繁瑣的東西,但我意思是它們能幹漂亮的活,這就是我要分享的。 
  怎麼說呢,讓我們看看這些效果最好的朴實的CSS細節——這些細節遠遠沒有那些酷炫的CSS效果那麼引人註目。它們有些已經存在一段時間了,但值得我們更好地認識,而有些則剛剛面世。雖然不起眼,但是它們可以提高我們的工作效率——以謙虛的姿態。 
相對單位 
  聰明又有前瞻頭腦的開發者們已經使用相對單位了——如em或者百分比——所以,開發者們瞭解這個問題:往往因為元素的繼承性而需要使用計算器作為輔助工具來計算大小。例如,現在普遍的做法是給頁面的字體設置全局尺寸,然後用相對單位來定義頁面中其它的元素。CSS大概會這樣寫: 
html { font-size: 10px; } p { font-size: 1.4em; }

  這樣寫是沒問題,直到有個子元素需要設置一個不同的字體大小,比如,在這樣的標簽當中: 
The cat sat on the mat.

  如果你要設置span的字體大小為1.2em,你需要做什麼?拿出計算器,算算1.2除以1.4是多少,結果如下: 
p span { font-size: 0.85714em; }

  這個問題不局限於em。如果用百分比來創建響應式的流式佈局網站,而百分比是與容器相關的,所以,如果要定義一個元素為它的容器的40%,它的高是75%,寬則需要設置為53.33333%。 
  很明顯,這很不方便。 
根相關的長度單位 
  為了修複字體大小定義的問題,現在可以使用單位rem(root em)。rem同樣是相對單位,但是它所對應的是固定的基本值,這個固定的基本值也就是文檔的根元素的字體大小(在HTML文件中,就是html元素)。假設和上個例子一樣,同樣設定10px的字體大小為根元素的大小,那麼CSS這樣寫就OK了: 
p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

  這兩個CSS規則都是相對於根元素的字體大小,這樣的代碼更加優雅和簡便,特別是在設置簡單的數值如10px或者12px的時候。這樣和使用px值很相似,不同點在於rem是可擴展的。 
  在整篇文章介紹的特性中,rem特性相對來說是相容性比較好,高級瀏覽器都能支持,包括IE9在內,除了Opera Mobile。 
視窗相關的長度單位 
  覺得rem單位很酷吧,如果還有另外一組單位能解決百分比的問題,那就更酷了。它和rem的道理相似,不同點在於,它相對的不是文檔的根元素,而是相對於設備視窗本身的大小。 
  這兩個單位就是vh和vw,即是相對於視窗大小的高和寬。每個單位在前面加上數字,代表的是多少個百分比。 
div { height: 50vh; }

  在上面的例子,高度被設定為視窗高度的一半。1vh相當於一個百分比的視窗高度,所以50vh即是50%的視窗高度。 
  如果視窗大小變了,那麼這個值也隨之改變。這相對百分比來說,好處是不需要擔心父容器,不管它的父容器如何,10vw的元素會一直是10%的視窗大小。 
  相應地,有vmin單位,相當於vh或者vw的最小值,最近還宣佈有vmax單位會被加到規範文檔裡面(雖然在這篇文章發佈的時候還沒有)。 
  現在支持這個特性的有IE9+、Chrome和Safari 6。 
運算式的值 
  如果你在做響應式的流式佈局網站,經常會遇到混合單位的問題——用百分比設置柵格,但是又用固定像素寬度設置margin。如: 
div { margin: 0 20px; width: 33%;}

  如果佈局只用到padding和border,你可以使用box-sizing來解決,但是對於margin就無能為力了。更好、更靈活的方法是使用calc()函數,設置不同單位之間的數學方程式,如: 
div { margin: 0 20px; width: calc(33% - 40px);}

  它不僅可以用來計算寬,還可以用來計算長度——如果有必要,還可以在calc()裡面再加calc()。 
  這個特性IE9+和Firefox都支持,Firefox需要加上 -moz- 首碼(在版本16或17可能不用加首碼),Chrome和Safari也支持,但需要加上 -webkit- 首碼。然而,移動Webkit還不支持。 
載入字體庫的部分字體 
  優越的性能往往很重要,尤其是市場上各種各樣的移動設備——導致連接速度的差異和不確定性——更加體現了這個重要性。其中一個加快頁面載入速度的方法,就是減少外部文件個數,@font-face的一個新屬性unicode-range就是為此而生。 
  這個屬性就是unicode-range(編碼範圍),代表的是編碼字體的參數範圍。在載入外部文件的時候,只有那些被使用的字體才會被載入,而不是整套字體庫。下麵的代碼演示瞭如何從foo.ttf字體庫中僅載入三個字體: 
@font-face {font-family: foo;src: url(‘foo.ttf’);unicode-range: U+31-33;}

  這點對於使用字體圖標的頁面尤其有用。我測試過,使用unicode-range,載入字體文件的時間平均減少了0.85秒,也不是小數目了。當然,你可能不會這麼想。 
  這個屬性,目前可以在IE9+、Webkit瀏覽器(如Chrome和Safari)中運行。 
新的偽類 
  單位和值都應該好好利用,但是,讓我更興奮的是選擇器和偽類。完善的選擇器模式,即使只有少數瀏覽器支持,都讓我興奮不已。引用喬布斯的話:你要把柵欄的裡面修得和外面一樣漂亮,即使別人看不到裡面——因為你自己知道。 
  我第一次使用:nth-of-type()的時候,簡直是一次突破,就像我衝出了思想的桎梏。好吧,我有些誇張了。但有些新的CSS偽類,確實值得狂熱一番。 
否定偽類 
  你大概不知道 :not() 偽類的好,除非你親自實踐一番。帶有參數的 :not() 其實就是普通的選擇器——不是複合選擇器。一組元素加上選擇器 :not(),表示滿足這個參數的元素會被排除出去。聽起來有些複雜吧?但是實際上非常簡單。 
  假設:要對項目列表的奇數行進行選擇,但是最後一行除外。如果是以前,需要這樣寫: 
li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

  現在,通過設定:last-child作為否定偽類的參數,就可以把最後一個元素排除,這樣少了一行代碼,從而更加的簡潔和易維護。 
li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

  否定偽類看起來並沒有什麼驚人之處,你可以不用它,但是它還是挺實用的。我曾經把它用在基於Webkit的項目當中,優勢還是挺明顯的。說實話,它是我最喜歡的偽類之一。 
  是的,我有最喜歡的偽類。 
  在本文提到的特性當中,否定偽類是相容性最好的,它被IE9+和高級瀏覽器支持(不需要加瀏覽器產商首碼)。如果你熟悉jQuery,你可能習慣用它——版本1.0開始就有了,以及相似的not()方法。 
“適用於”偽類 
  :matches() 偽類可以用普通的選擇器、複合選擇器、逗號隔開的列表或任何的選擇器組合作為參數。太棒了!但是,它能做什麼? 
  :matches() 偽類最強大的地方就是聚合多行選擇器。例如,要選擇父容器裡面其中幾個不同子容器裡面的p元素,在這之前,代碼或許會寫成這樣: 
.home header p,.home footer p,.home aside p {color: #F00;}

  有了:matches()偽類,就可以把共同點提取出來,縮減代碼量。該例子裡面,選擇器的共同點是以home為起點、以p為終點,所以可以用:matches()把中間的所有元素集合起來。是不是有些困惑?看看代碼就明白了: 
.home :matches(header,footer,aside) p { color: #F00; }

  這其實是CSS4的一部分(確切地說,是CSS選擇器第四等級),這份規範文檔還提到將會有類似的語法(以逗號隔開的複合選擇器)應用於:not()偽類。興奮ing! 
  目前,:matches()可以在Chrome和Safari瀏覽器中運行,但是要加上首碼-webkit-,Firefox也支持,但是要按照舊的寫法:any(),同時要加上-moz-首碼。 
你愛上這些朴實的CSS細節了嗎? 
  這篇文章講到的特性,最贊的一點是它們解決了現實的問題,從瑣碎而繁複的選擇器到建立響應式網站的新挑戰。實際上,我期待每一個特性被使用到最普通的項目當中。(web前端學習交流群:328058344 禁止閑聊,非喜勿進!)

  新特性如濾鏡可能很直觀很華麗,但是我更願意發現隱藏在深處的實用小技巧。 
  在積極探索的過程中,每一個特性可以讓你的職業生涯更順利——想到這裡,就不會覺得繁瑣了


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.angular cookie的用法:(1)引入angular-cookies(2)註入ngCookies這模塊(3)想要更改cookies存儲位置的話要添加內置服務$cookiesProvider(4)註入這個內置服務可以更改cookies的預設配置項這是在做項目中,用預設的cookies登陸後 ...
  • 在平常的搜索中,我碰到過很多有趣的信息,應用程式和文檔,我把它們整理在下麵這個列表。這是收藏的遇到的有用內容的一個偉大的方式,可以在你需要的時候方便查閱。相信你會在這個列表中發現對你很有用的資料。 1. CSS Vocabulary 一個偉大的指向和點擊的小應用程式,讓你加快速度掌握 CSS 語法的 ...
  • qs庫的npm地址:https://www.npmjs.com/package/qs 功能雖然都是序列化。假設我要提交的數據如下 qs.stringify序列化結果如下name=hehe&age=10 而JSON.stringify序列化結果如下:"{"a":"hehe","age":10}" vu ...
  • 原始時代: script標簽引入javascript文件 這種方式缺乏依賴解析,全局變數空間污染,而且要保證文件引入的順序,管理比較混亂 原始時代: 模塊對象和IIFE模式 通過使用模塊對象和立即調用的函數表達式(IIFE) ,我們可以減少對全局作用域的污染。在這種方法中,我們只向全局作用域公開一個 ...
  • 首先,我是一隻菜雞,所寫的內容都是建立在自己的理解基礎之上,若有什麼不對的地方,歡迎指正。 1.事件處理函數 事件是指自動觸發的或用戶手動觸發的對象狀態的改變。 事件處理函數:當事件觸發時,自動執行的函數 事件處理函數的本質上是對象的一個特殊屬性,而該屬性指向了一個函數。 每個元素對象都能觸發各種事 ...
  • 0.要求 用戶點擊A單元格作為起始點,點擊B單元格最為終止點,要根據A、B兩個點算出四個邊界值,用來組成出一個矩形。 上圖紅色為終止點,綠色為起始點。 1.演算法 關鍵點1:合併單元格是通過rowspan,colspan來實現,意味一個單元格代替多個單元格,演算法中計算出的單元格位置需要與在視圖中看到的 ...
  • 第一種方法 代碼實現的一種方法 代碼裡面有兩處地方不明白 跟`ctx.shadowOffsetX = this.x+1000;`能感覺出來什麼意思,但是不知道為啥要加上,去掉就不行了。請路過的各位大佬們幫忙解答一下~~ ...
  • 前面兩篇介紹了兩個非常簡單的排序演算法,本篇介紹排序演算法的一個簡單應用——對大樂透隨機號碼進行排序。 由於工作中涉及很多前端的開發,所以對前端技術有一定瞭解,前端的一個好處是可以直觀地看到頁面的佈局。每次下班回家的路上總會路過一家彩票代售點,偶爾和同事一起去買幾註機選的,所謂機選,其實就是機器隨機生成 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...