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

瀏覽器兼容性有效性信息查詢 ： 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/code/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