讀書筆記 —— 《css秘密花園》

標籤：ref   自動   bsp   context   indicator   技巧   one   gif   elements   

瀏覽器安全色性有效性資訊查詢 ： Can I Use?

http://caniuse.com/

自動為css添加瀏覽器廠商首碼

https://autoprefixer.github.io/

線上編輯HTML/CSS/JavaScript與即時預覽的工作台

https://jsfiddle.net/http://codepen.io/pens/

http://runjs.cn/

 

簡易的DOM擷取工具函數

function $$(selector,context) {    context = context || document;    var elements = context.querySelectorAll(selector);    //我們知道，Array.prototype.slice.call(arguments)能將具有length屬性的對象轉成數組
　　// 除了IE下的節點集合（因為ie下的dom對象是以com對象的形式實現的，js對象與com對象不能進行轉換）    return Array.prototype.slice.call(elements);}

 

 

 通過js判斷樣式屬性是否被支援

/* 檢測單個屬性 */
var root = document.documentElement;if (‘textShadow‘ in root.style) {    root.classList.add(‘textshadow‘);} else {    root.classList.add(‘no-textshadow‘);}/*  上例函數化 */function testProperty(property) {    var root = document.documentElement;    if (property in root.style) {        root.classList.add(property.toLowerCase());        return true;    }    root.classList.add(‘no-‘ + property.toLowerCase());    return false;}
/* 檢測某個具體的屬性值是否支援： */function testValue(id, value, property) {    var dummy = document.createElement(‘p‘);    dummy.style[property] = value;    if (dummy.style[property]) {        root.classList.add(id);        return true;    }    root.classList.add(‘no-‘ + id);    return false;}

 

demo1——css編輯技巧:

http://runjs.cn/detail/hul3lwuq

/* 如果字型變化，這段代碼改動的幅度會非常大 */.button{  padding:6px 16px;  border:1px solid #446d88;  background:#58a linear-gradient(#77a0bb,#58a);  border-radius:4px;    box-shadow:0 1px 5px gray;  color:white;    text-shadow:0 -1px 1px #335166;    font-size:20px;    line-height:30px;    }/* 字型改大，其他地方也跟著變大，知識點在於em單位，但依然存在問題，就是顏色 */.button-2{  padding:.3em .8em;  border:1px solid #446d88;  background:#58a linear-gradient(#77a0bb,#58a);  border-radius:.2em;    box-shadow:0 .05em .25em gray;  color:white;    text-shadow:0 -.05em .05em #335166;    font-size:225%;    line-height:1.5;    }/* 只需要覆蓋背景顏色，就可以動態改變了 */.button-3{  padding:.3em .8em;  border:1px solid #446d88;  background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);  border-radius:.2em;    box-shadow:0 .05em .25em gray;  color:white;    text-shadow:0 -.05em .05em #335166;    font-size:225%;    line-height:1.5;    }.ok { background-color:#6b0;}.warn{ background-color:#c00;}

View Code

 

 

讀書筆記 —— 《css秘密花園》