CSS世界中那些提及來很冷的知識

讀書使我快樂-哈哈

最近讀了張鑫旭的新書《CSS世界》收穫了很多奇技淫巧和對CSS的深度理解

也正值我的在公司內部進行部分章節的內容分享，因而順帶着直接把我即將分享的內容先給你們過過目了，就當省去了你們買了書後，無暇顧及觀看的尷尬吧！

本書的最後三章分別是

• 元素的顯示與隱藏
• 用戶界面樣式
• 流向的改變

下面我就直接進入主題，開始對每一章節進行一個非系統的分享了

元素的顯示與隱藏

使用CSS讓元素不可見的方法不少，剪裁、定位到屏幕外、透明度變化等都是能夠的。雖然它們都是肉眼看不見，但背後卻在多個維度上都有差異

下面是總結的一些比較好的隱藏實踐，你們一塊兒來根據實際開發場景來選擇合適的使用

比較好的隱藏實踐

• 不佔空間，不渲染 使用script

  <script type="text/html">
      <!-- 圖片是不會發送請求的 -->
      <img src="1.jpg" />
      <!-- 若是想嵌套須要藉助textarea了 -->
      <textarea style="display: none;">
          <img src="2.png" />
      </textarea>
  </script>
  複製代碼

• 不佔空間，資源能夠加載，DOM可訪問 使用display:none

  <div id="box">成都</div>
      <script>
          let oBox = document.getElementById('box');
          console.log(oBox);  // <div id="box">成都</div>
      </script>
  複製代碼

• 不佔空間，隱藏顯示時有transition效果

  .hidden {
      position: absolute;
      visibility: hidden;
  }
  
  <div class="div hidden">一杯敬朝陽 一杯敬月光</div>
  複製代碼

• 佔空間，不能點擊 visibility: hidden

  .vh {
      visibility: hidden;
  }
  複製代碼

• 不佔空間，不能點擊，鍵盤能訪問 clip裁切

  .out {
      position: relative;
      left: -999em;
  }
  .clip {
      position: absolute;
      clip: rect(0, 0, 0, 0);
  }
  
  <div class="clip">
      <div class="out">青花瓷</div>
  </div>
  複製代碼

• 佔空間，不能點擊，鍵盤能訪問 relative

  <div style="position: relative;top: -999em;">獅子座</div>
  複製代碼

• 佔空間，能夠點擊 opacity

  <div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>
  複製代碼

• 隱藏文字 使用text-indent

  <p style="text-indent: -999999px;">天下無雙</p>
  複製代碼

根據實際的隱藏場景選擇合適的隱藏方法，這裏就再也不多說了，接着往下看吧

display與元素的顯隱

咱們都知道display若是值爲none，則該元素以及全部後代元素都隱藏，反之若是值是非none的狀況，則都爲顯示了

display能夠說是web顯隱交互中出場頻率最高的一種隱藏方式，是真正意義上的隱藏，乾淨利落，不留痕跡

none作到了沒法點擊、沒法使用屏幕閱讀器等輔助設備訪問，不佔空間，其實不只僅是這樣，更應該知道的是

me: 我有酒，那麼別說你沒有故事

我知道display:none你纔不是一個沒有故事的女同窗

display: none的元素的background-image圖片根據不一樣瀏覽器的狀況加載狀況不一

1. 在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此

2. 在Chrome和Safari瀏覽器，則根據父元素是不是否爲none來影響圖片加載狀況，父元素帶有display:none，圖片不加載。

   父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載

   

3. 在IE瀏覽器下，不管怎麼搞都會請求圖片資源，就是這麼任性

所以，在實際開發的時候，例如頭圖輪播切換效果

那些默認須要隱藏的圖片做爲背景圖藏在display:none元素的子元素上，這樣的細小改動就能夠明顯提高頁面的加載體驗，也是很是實用的小技巧

whatever

上面說的興致盎然，但實際中不可能所有都是背景圖去加載圖片資源的

還有另一個好朋友，img元素，然並卵的是，上面說了一大堆加載不加載的狀況，對img來講沒個鳥用，人家無論你none不none的，依舊帶着勇闖天涯的氣概去請求着資源

活久見

都說display:none作事最純粹，最乾淨，不能被點擊，觸碰到，然而下面這種狀況又是什麼鬼？

出來解釋解釋，咱們都是文明人是絕對不會動武的！

<form action="/index.php">
    <input type="submit" id="hi" style="display: none;">
    <label for="hi">提交</label>
</form>
複製代碼

隱藏的按鈕會觸發click,觸發表單提交，此現象出如今時髦的瀏覽器中(IE9+，現代標準瀏覽器中）

既然有這種例外狀況那加了display:none的意義又是什麼呢？

• 意義在於：當按鈕和label元素不在一個水平線上的時候，點擊label元素不會觸發錨點定位
• But：做者不推薦這麼作，由於submit按鈕會丟失鍵盤可訪問性

不少都是純自然的

HTML中有不少標籤和屬性自然自帶display:none

• 標籤：style, script, dialog
• 屬性：

  <input type="hidden" name="id" value="1" />
  // 專門用來放置相似token或id這些隱藏信息的
  // 因此說，表單元素的顯隱並不影響數據的提交
  // 其真正影響的是disabled屬性
  複製代碼

• HTML5中新增了hidden這個布爾屬性，可讓元素天生隱藏起來

  <div hidden>看不見我</div>
  // IE11及現代標準瀏覽器都支持，若是作兼容須要這樣寫下便可
  [hidden] {
      display: none;
  }
  複製代碼

• 對於ol有序列表來講，若是子元素li有一項被設置了display:none，那麼本來有10相的元素，最後總計數會被計算成9項，設置display:none的那項被後面的兄弟給取代了
• 還有一點就是display:none其實並不會影響css3 animation動畫的實現，而只是會影響transition過渡效果的執行，所以transition和visibility屬性關係更好 （老鐵扎心了）

既然說到了visibility了，那麼就趕忙邀請visibility閃亮登場吧

visibility與元素的顯隱

visibility要爲本身正名，不只僅是保留空間這麼簡單

看點多多：

1. 繼承性(最有意思的一個特色，不是我說的)
   • 父元素設置visibility:hidden，子元素也繼承了該屬性，也是看不見的
   • 不過本質區別在於，父元素設置了hidden後，子元素設置visible後，子元素是能夠被看都的
   • 這點父元素設置了display:none，子元素就永遠看不到了

   <ul style="visibility: hidden;">
       <li style="visibility: visible;">1</li>
       <li>2</li>
       <li>3</li>
       <li style="visibility: visible;">4</li>
   </ul>
   複製代碼

2. 與css計數器

visibility:hidden雖然讓元素不可見了，可是不影響其計數效果，不會從新計算結果

3. 與transition

設置了visibility:hidden的元素，能夠很好的展示transition過渡效果

這是由於transition支持的css屬性中有visibility(果真是兄弟)，而並無display屬性

4. 與JS

visibility:hidden除了對transition友好外，對js來講也很友好

在實際開發中，須要對隱藏元素進行尺寸和位置的獲取，來實現佈局精肯定位的交互

此時，就建議使用visibility:hidden

.hidden {
    position: absolute;
    visibility: hidden;
}
let ele = document.getElementById('demo');

console.log('clientWidth: ' + ele.clientWidth);
console.log('clientHeight: ' + ele.clientHeight);
console.log('left: ' + ele.clientLeft);
console.log('top ' + ele.clientTop);
console.dir(ele.getBoundingClientRect());
複製代碼

好了以上內容要告一段落了，咱們繼續開始新的征程吧，哈哈

用戶界面樣式

用戶界面樣式指的是CSS世界中用來幫助用戶進行界面交互的一些CSS樣式，主要有outline和cursor等屬性

和border形似的outline屬性

outline表示元素的輪廓，語法也和border同樣，分爲寬度、類型和顏色三個值

.outline {
    height: 60px;
    width: 60px;
    outline: 2px dashed #0c9;
}
複製代碼

樣式表示上相同，可是設計的初衷倒是不太相同的，這一點天地日月可鑑

outline是一個和用戶體驗密切相關的屬性，與focus狀態以及鍵盤訪問密切相關

對於按鈕或連接，一般的鍵盤操做是：Tab鍵按次序不斷focus控件元素(連接、按鈕、輸入框等表單元素)，或者focus設置了tabindex的普通元素，而後按Shift+Tab是反向訪問

重點來了！

默認狀態下，對於處於focus狀態的元素，瀏覽器會經過發光or虛框的形式進行區分和提示，這是友好的用戶體驗，頗有必要，否則用戶很難知道本身當前聚焦在了哪一個元素上面，會迷失自我

元素若是聚焦到了a連接上，按下回車鍵就會跳轉到相應連接，以上的交互都是基於鍵盤訪問的，這就是爲何outline和鍵盤訪問如此親密了

不專業的行爲

不少時候直接在reset樣式的時候，寫成以下形式是很是不可取的

* { outline: 0 none; }
或
a { outline: 0 none; }
複製代碼

這樣直接一竿子打死一羣鴨子的作法是不對的，更多的時候是由於瀏覽器內置的focus效果和設計風格格格不入，才須要重置，並且要使用專門的類名

例如：
.input {
    outline: 0;
}
// 可是，必須把focus狀態樣式加上
.input:focus {
    border-color: Highlight
}
複製代碼

最後再強調一遍：萬萬不可在全局設置outline: 0 none;

這樣的操做會形成鍵盤訪問的時候用戶找不到當前焦點，容易產生困擾的，爲了你們好，收斂一下吧

下面來點乾貨: 在實際開發中，有時候須要讓普通元素代替表單控件元素有outline效果

舉個栗子：submit按鈕來完成UI設計是很是麻煩的，因此使用label元素來移花接木，經過for屬性和這些原生的表單控件相關聯

[type="submit"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.btn {
    display: inline-block;
    padding: 2px 12px;
    background-color: #19b955;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
:focus + label.btn {
    outline: 1px dashed hotpink;
    outline: 3px auto -webkit-focus-ring-color;
}

<div class="panel">
    <input type="submit" id="box">
    <label for="box" class="btn">提交</label>
</div>
複製代碼

真正的不佔據空間的outline及其應用

outline是一個真正意義上不佔任何空間的屬性，Amazing

頭像剪裁的矩形鏤空效果

先來看個效果圖

上圖就是矩形鏤空效果，那麼下面直接上代碼，滿滿的乾貨

核心css是
.crop {
    overflow: hidden;
}
.crop .crop-area {
    width: 80px;
    height: 80px;
    outline: 256px solid #000;
    outline: 256px solid rgba(0, 0, 0, .5);
    background: url(about:blank);
    background: linear-gradient(to top, transparent, transparent);
    filter: alpha(opacity=50);
    cursor: move;
}
:root .crop-area {
    filter: none;
}
複製代碼

用一個大大的outline來實現周圍半透明的黑色遮罩，由於outline不管設置多麼多麼大，都不會佔據空間影響佈局，至於超出的部分，直接給父元素設置一個overflow:hidden就搞定了 注意：

• 由於考慮到IE8不支持rgba，因此上面藉助了filter設置了透明度爲一半效果
• 可是因爲IE9支持rgba，再借助:root來進行重置，不使用filter
• 再加上IE10針對鏤空元素會有點擊穿透問題，因此再給background設置看不見的背景內容就能夠解決

自動填滿屏幕剩餘空間的應用技巧

開發中不少時候，因爲頁面內容不夠多，致使底部footer會出現尷尬的剩餘空間，解決方法每每也有不少種，在此咱們仍是依然利用outline的功能來完美實現一下

關鍵的css就是設置一個超大輪廓範圍的outline屬性，如給個9999px，保證不管屏幕多高，輪廓顏色都能覆蓋

值得注意的是，outline沒法指定方位，它是直接向四周發散的，因此須要配合clip剪裁來進行處理,以左邊和上邊爲邊界進行裁剪

.footer {
    height: 50px;
}
.footer > p {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    padding: 15px 0;
    background-color: #00a1f5;
    outline: 9999px solid #00a1f5;
    color: #fff;
    clip: rect(0, 9999px, 9999px, 0);
}

<div class="footer">
    <p>沒錯，我就是footer</p>
</div>
複製代碼

光標屬性

光標屬性cursor咱們真的是最熟悉的陌生人啊

爲何這麼說呢，由於在衆多的屬性值面前，咱們彷佛只用到了pointer(手形)(最經常使用的，沒有之一)，move(移動)，default(系統默認)這幾樣

在cursor的世界裏，遠比咱們想象的要豐富不少，下面按照功能特性來對其進行分類吧

琳琅滿目的cursor屬性值

友情不友情的小提示：☆（表示經常使用）

• 常規
  • cursor: auto; 默認值
    • 輸入框表現是cursor: text (文本光標)
    • href屬性的連接表現爲cursor: pointer (手形光標)
    • button表現爲cursor: default (默認箭頭)
  • ☆ cursor: default; 系統默認光標
    • 誤區產生的小故事：
      • 因爲瀏覽器原生按鈕樣式兼容方面沒法完善，尤爲是IE盛行的年代，黑框、寬高不一致等問題層出不窮， 因而你們就使用a標籤來模擬按鈕，在每次hover上去的時候都會有一個手型效果，省去了額外添加， 因此長此以往就成了業內約定俗成的作法了
  • cursor: none; 這是讓光標隱藏不見
    • what? 有何用？它的做用在看視屏的時候，全屏後鼠標靜止不動3秒鐘，就設置隱藏光標效果
    • IE8不支持，還要經過自定義光標來處理

    // 自定義光標
    .cur-none {
        cursor: url(transparent.cur), auto;
    }
    :root .cur-none {   // IE9+
        cursor: none
    }
    複製代碼

• 連接和狀態
  • ☆ cursor: pointer; 手形
  • cursor: help; 幫助光標
    • 用在幫助連接或者提示信息的問號小圖標上
    • 不過目前不多在網頁上看到，更多的是使用cursor:pointer手形處理
  • cursor: progress; 進行中
    • 一個適用場景是網頁加載js的狀況，網絡很差時，加載js時間過長

    body {
        cursor: progress;
    },
    // 當js加載完成後再將光標cursor設爲auto;
    // 增長了用戶體驗
    document.addEventListener('DOMContentLoaded', () => {
        document.body.style.cursor = 'auto';
    });
    複製代碼

  • cursor: wait;
    • 沒用的光標，有個沙漏的樣子
  • cursor: context-menu;
    • 上下文菜單，兼容性很複雜，汽油桶形狀，用處不大
• 選擇
  • ☆ cursor: text; 文字可被選中
    • input默認光標表現就是cursor:text
      • 可是若是設置了disabled後，光標會自動變成cursor:default
    • 還有若是在現代瀏覽器中不容許文字選中的狀況下，設置了user-select:none後，還要把對應的光標改變爲cursor:default

    p {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }
    <p>弱水三千</p>
    // 不過如今最新版的瀏覽器都自動設置了cursor:default
    複製代碼

  • cursor: vertical-text;
    • 垂直選中，文字排版是垂直狀況的時候，基本沒機會用到
  • cursor: crosshair;
    • 十字光標，它比較適合取色工具的場景中，平時用不到
  • cursor: cell;
    • 單元格光標，適合開發相似Excel表格的網頁使用
    • 並且IE8還不支持，須要自定義，也是沒機會表現了
• 拖拽
  • ☆ ccursor: move;
    • 移動光標，表示當前元素是可移動的
    • 經常使用的彈窗組件給標題欄加上cursor:move，讓用戶知道是能夠拖動的
  • cursor: copy;
    • 複製光標，表示當前元素能夠複製，IE8不支持，需自定義，無實用
  • cursor: alias;
    • 別名光標，表示當前元素能夠建立別名或快捷方式，同上copy同樣，沒個卵用
  • cursor: no-drop與cursor: not-allowed;
    • 樣式相同，都表示禁止的
    • 值得注意的是：
      • 不要給禁用按鈕加cursor: not-allowed
      • 由於它的狀態只與拖拽行爲相關
      • 因此禁用按鈕光標仍是用default更合適
• 都是CSS3新增的光標類型
  • 縮放
    • cursor: zoom-in; 放大
    • cursor: zoom-out; 縮小
  • 抓取
    • cursor: grab; 五指張開的手
    • cursor: grabbing; 五指收起的手
    • Chrome下還須要加-webkit前綴生效
    • 這裏QQ音樂PC端作了這樣的cursor處理，以下圖框選的位置

      

• 自定義光標
  • 遇到一些IE8不支持的光標類型，能夠經過自定義的手段來實現兼容
  • chrome等瀏覽器能夠直接使用png圖片做爲光標
  • IE不行，它仍是要用專門的.cur格式
  • 而自定義光標最大的做用實際上是根據業務需求對光標進行樣式上的自定義
  • 不過如今用的真是很少了

以上內容就介紹完了用戶界面樣式的所有內容了，還有最後一章的冷知識，你們不要方，繼續看下去，瞭解一下，瞭解一下，瞭解一下

流向的改變

說出來你可能不信，direction能夠改變水平流向，儘管知道或者使用過的人少之又少，但並不妨礙它的發光發熱

並且屬性簡單好記，值少，兼容極好ie6支持，能夠來挖掘一下它的神奇功效

direction

僅僅兩個值：

• direction: ltr; 默認值
  • ltr -> left-to-right(從左到右)
  • 東亞、歐美文字書寫都是屬於ltr模式的
• direction: rtl;
  • rtl -> right-to-left(從右到左)
  • 阿拉伯語、希伯來語的書寫屬於rtl模式

固然看到這裏你可能會感受，這些提及來都沒什麼鳥用，由於大招是不輕易放出的，而真正有用的地方在於改變網頁佈局的時候

direction屬性默認有一個特性

能夠改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現順序

舉個栗子：顛倒順序

<div class="box" dir="rtl">
    <p>我是第2名</p>
    <p>我是第一名</p>
</div>

<p dir="rtl">
    <img src="../1.jpg" alt="貓">
    <img src="../2.png" alt="狗">
</p>
複製代碼

再舉個栗子：

好比製做彈窗組件的時候，確認和取消按鈕有的時候會根據用戶的使用行爲會顯示在不一樣的位置

下面來看看這種特性的表如今實際開發中的做用

windows用戶看到的樣子：

mac用戶看到的樣子：

好了，direction的話題就告一段落，接下來介紹最後一個知識了，堅持住，快休息了

writing-mode

改變CSS世界縱橫規則的writing-mode，如此強大的功能，竟然沒有被你們發掘和廣發應用起來，實屬遺憾了，話很少說，往下看

writing-mode做用及真正須要關注的屬性值

writing-mode能夠改變排版，變成垂直流，以下圖所示

在使用語法上，也是須要記兩套的，一套是 IE私有屬性，一套是 CSS3規範屬性

CSS3語法：

writing-mode: horizontal-tb;    默認值
    文本流是水平方向的
writing-mode: vertical-rl; 
    文本是垂直方向的，閱讀順序從右向左(古詩的順序)
writing-mode: vertical-lr;
    文本垂直方向，閱讀順序從左到右(水平變成了垂直展現)
複製代碼

IE語法：

IE的writing-mode多達11個，真正有用的記住兩個就行了

-ms-writing-mode: lr-tb;    初始值
    lr-tb對應的是CSS3語法中的horizontal-tb
-ms-writing-mode: tb-rl;
    tb-rl對應的是CSS3語法中的vertical-rl
-ms-writing-mode: tb-lr;
    tb-lr對應的是CSS3語法中的vertical-lr
複製代碼

針對實戰版來整理一份writing-mode是這樣的

writing-mode: lr-tb | tb-rl | tb-lr (IE8+)
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
複製代碼

對於垂直排版來講，實際開發是不多會遇到的，不過仍是要說說writing-mode帶來的改變

水平方向也能margin合併

咱們都知道兩個相鄰的元素垂直的margin會合並，當元素變爲垂直流的時候，水平的margin也會合並

.vertical-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

<div class="div vertical-mode">
    <div class="list" style="margin-left: 20px;">one</div>
    <div class="list" style="margin-right: 50px;">two</div>
</div>
複製代碼

普通塊元素可使用margin: auto實現垂直居中

img {
    display: block;
    margin: auto 0;
}

<div class="box vertical-mode">
    <img src="../1.jpg" alt="">
</div>
<div class="box vertical-mode" style="text-align: -center;background: gray;">
    <div class="demo">青花瓷</div>
    <!-- <img src="../2.png" alt=""> -->
</div>
複製代碼

上面分別是圖片元素和普通塊元素實現的垂直居中代碼，眼見爲實，看圖

text-align:center實現圖片垂直居中(同上實現的效果)

<div class="box vertical-mode" style="text-align: center;">
    <img src="../2.png" alt="">
</div>
複製代碼

使用text-indent實現文字下沉效果

核心css

.btn:active {
    text-indent: 2px;
}
<a href="javascript:;" class="btn vertical-mode">領</a>
複製代碼

這種文字下沉效果只能適合中文，由於在垂直流排版的時候中文是不會旋轉的

並且這種效果只適合一個字的情景

實現全兼容的icon fonts圖標旋轉效果

老IE下讓小圖標旋轉很麻煩，writing-mode把文檔變成垂直流的時候，英文、數字和字符號都自然的轉了90°

@font-face的兼容性很好IE5.5就支持了，因此就算是IE6和IE7也沒問題

<span class="icon-play vertical-mode">剪頭朝下</span>
複製代碼

好了，這就是《CSS世界》裏最後三章的所有內容了，終於寫完了，哈哈，但願你們有收穫一些冷知識，另外看書仍是要買正版的，地址我就不發了，你們還請支持張鑫旭老師的做品

簡單說兩句

作個我的的小總結吧：

css有不少奇妙的地方，在某些特性當初被設計出來的時候可能只是爲了某些圖文排版而生

可是咱們能夠利用它們帶來的特性發揮本身的創造力，實現其餘不少意想不到的效果，所以，上面所講述的全部知識點，儘管不少內容都有點奇技淫巧以悅婦孺的過程

但這也給咱們開發的過程當中，提供了一些很出奇的妙招，值得咱們好好學習領悟

感謝個位的觀看了，再見了，哈哈