国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

CSS Variables學(xué)習(xí)筆記

mudiyouyou / 2903人閱讀

摘要：注本文首發(fā)于個(gè)人博客學(xué)習(xí)筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學(xué)習(xí)筆記。使用自定義屬性來(lái)設(shè)置變量名，并使用特定的來(lái)訪問(wèn)。二學(xué)習(xí)筆記聲明調(diào)用聲明方式變量聲明的方式非常簡(jiǎn)單，如下，聲明了一個(gè)名叫的變量。

注：本文首發(fā)于個(gè)人博客 《CSS Variables學(xué)習(xí)筆記》。

最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學(xué)習(xí)筆記。

一、什么是CSS Variables

來(lái)，直接看MDN上的描述：

CSS 變量是由CSS作者定義的實(shí)體，其中包含要在整個(gè)文檔中重復(fù)使用的特定值。使用自定義屬性來(lái)設(shè)置變量名，并使用特定的 var() 來(lái)訪問(wèn)。
color: var(--main-color);
二、學(xué)習(xí)筆記 1. 聲明 & 調(diào)用 i. 聲明方式

CSS變量聲明的方式非常簡(jiǎn)單，如下，聲明了一個(gè)名叫color的CSS變量。

在css文件中寫(xiě)

寫(xiě)在html標(biāo)簽的inline-style里

用JS給某個(gè)元素聲明，方法.style.setProperty 

body{
  --color: red;
}


document.getElementsByTagName("body")[0].style.setProperty("--color", "red")

ii. 調(diào)用方式

通過(guò)var()函數(shù)調(diào)用，如：


.block{
  color: var(--color);
}

iii. 變量的命名

說(shuō)完聲明和調(diào)用，還有個(gè)小問(wèn)題。那么，CSS變量的命名，有什么限制么？下面我們來(lái)測(cè)試一下。


.foo-test{
  --foo:;
  --ffoo:;
  --Foo: red;
  --FOo: blue;
  --FOO: green;
  /* 以下省略測(cè)試className的代碼 */
}




從以上測(cè)試代碼可以看出：



CSS變量的命名是大小寫(xiě)敏感的


不賦值或者賦值空格，都是無(wú)效的


2. 作用域 & 繼承

CSS變量也有作用域一說(shuō)，而最頂層的作用域就是:root，下面的所有的元素都可以共享相關(guān)CSS變量。


:root{
  --color: green;
}


剛才我們?cè)?b>body上，定義了--color，在body下的子元素，都會(huì)默認(rèn)繼承這個(gè)屬性，隨意使用。當(dāng)然也可以重載，把--color定義為別的值。



  
inherit color

  
overwrite color - hello world




body{
  --color: green;
}
.block{
  color: var(--color);
}
.css-var-text{
  --color: red;
  color: var(--color);
}


.block，作為body的子元素，繼承了--color屬性，所以邊框出來(lái)就是green。


而.css-var-text在自己的作用域中，重寫(xiě)了--color，出來(lái)的字體顏色是overwrite后的blue。



3. 瀏覽器支持
i. 瀏覽器支持現(xiàn)狀

來(lái)看看caniuse上CSS Variables (Custom Properties)的支持度：


PC的話，IE 11和Edge的支持度都很差，而Chrome（2016.3）、Firefox（2017.11）和Safari(2017.3)的一些新版本都是支持的，相信很快就能普及。


Mobile的話，Safari在2016年的版本已經(jīng)支持CSS變量了，但Opera、Chrome、UC等的支持還不太好。



ii. fallbacks

瀏覽器的支持度不太好，我們又想玩新東西的話，就需要考慮如果瀏覽器不支持CSS變量，怎么優(yōu)雅降級(jí)。（嗷，兩套代碼是有點(diǎn)……）


/* 當(dāng)瀏覽器不支持CSS變量 */
.browser-support{
  background: red;  
}

/* 當(dāng)瀏覽器支持CSS變量 */
@supports (--css: variables) {
  .browser-support{
    background: var(--color);
  }
}

三、代碼習(xí)作
1. codepen

在學(xué)習(xí)CSS Variables的時(shí)候，有邊寫(xiě)一些教程的demo，除了以上，還包括一些實(shí)際場(chǎng)景的應(yīng)用，如像box-shadow復(fù)合屬性的拆解，以及JS操作CSS變量等。


CSS Varibles Study Notes on Codepen.io.

2. flexbox屬性的DEMO



之前在團(tuán)隊(duì)也做過(guò)一下下flexbox的分享，大家也知道，flex屬性和對(duì)應(yīng)的值特別多，當(dāng)時(shí)就很想做個(gè)可以隨時(shí)變屬性值看效果的playground。


但想了下傳統(tǒng)的實(shí)現(xiàn)方式，貌似沒(méi)有優(yōu)雅的方法。



CSS+JS實(shí)現(xiàn)：寫(xiě)一批classname，option切換時(shí)，通過(guò)JS修改classname改變樣式；


純JS實(shí)現(xiàn)，根據(jù)option的value用JS改寫(xiě)元素的inline style（一直修改dom）



哎喲，換CSS Variables之后，一切就不一樣了，可繼承、可復(fù)用、易維護(hù)，目前實(shí)現(xiàn)比較簡(jiǎn)單，可能跟以上的傳統(tǒng)方式差別不太大，不過(guò)后續(xù)要修改或者做更多優(yōu)化，我相信優(yōu)勢(shì)就會(huì)凸顯出來(lái)了。


demo傳送門(mén)：wuyuying.com/flexbox-css-var


github傳送門(mén)

小結(jié)

哈哈，沒(méi)想到小結(jié)寫(xiě)什么，如果大家有好玩的CSS Variables的應(yīng)用，歡迎分享給我 ：）
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113156.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    Day03 - CSS 變量
    
                                                     
    摘要：變量作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。這是一個(gè)的新特性，和目前都還不支持。命名寫(xiě)法是變量名，在引用這個(gè)變量時(shí)寫(xiě)法是變量名。如何用改變屬性值在中即代表文檔根元素。

Day03 - CSS 變量
作者：?liyuechun  簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是...
    
                                                   
                          
    
                                
    
                                    dunizb
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則
    
                                                     
    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。

筆記說(shuō)明
重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專(zhuān)欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專(zhuān)欄學(xué)習(xí)【原文有...
    
                                                   
                          
    
                                
    
                                    codeKK
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則
    
                                                     
    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。

筆記說(shuō)明
重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專(zhuān)欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專(zhuān)欄學(xué)習(xí)【原文有...
    
                                                   
                          
    
                                
    
                                    SolomonXie
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則
    
                                                     
    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。

筆記說(shuō)明
重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專(zhuān)欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專(zhuān)欄學(xué)習(xí)【原文有...
    
                                                   
                          
    
                                
    
                                    HollisChuang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<