CSS

這個還滿實用的

節錄中譯自這篇

https://css-tricks.com/efficiently-rendering-css/

而上面這篇又參考了
這篇 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient...
跟這篇 https://developers.google.com/speed/docs/insights/PrioritizeVisibleConte...

關於瀏覽器解譯CSS程式的方式及效率有幾個大原則

CSS的:hover語法，再Android手機中，可以自動轉為touch效果。但這在iOS的觸控行動裝置(ipad,iphone)中會失效，此時只能依靠javascript註冊event來處理。語法如下：

$('selector').bind('touchstart touchend', function(e) {
    e.preventDefault(); //如果是連結的話，需要先移除連結的預設功能，避免一touch就轉頁了
    $(this).toggleClass('ishover');//為被touch的物件增減一個ishover的class
});

本文參考自這裡

原理是在iframe外面增加一個container，利用這個container來偵測區域尺寸

HTML內容如下：

<div class="iframe-rwd">
    <iframe ...></iframe>
</div>

CSS內容如下：

.iframe-rwd  {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

本篇參考自這裡：http://www.w3schools.com/cssref/css3_pr_background.asp

語法：
background: color position/size repeat origin clip attachment image|initial|inherit;

其中size, origin,clip 是屬於CSS3才有的屬性

參考網站：http://www.w3schools.com/cssref/pr_font_font.asp

font有許多屬性,可區分成許多不同的個別屬性值，基本上都可以簡寫進font屬性中。

語法：
font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

本篇筆記的重點在於這個部份，font-size/line-height ，這個還滿方便的，可以直接設定行高

本篇主要會用到的CSS屬性為：border 。

應該有很多人沒辦法理解，所以一步一步來解釋一下：

1.首先，一般border會看到的樣貌，我們把線寬設大一點來看：

    height: 100px;
    width: 100px;
    border-top: 30px solid #C66;
    border-bottom: 30px solid #6C6;
    border-left: 30px solid #66C;
    border-right: 30px solid #CC6;

2.應該可以看到上左下右的邊框交接處都是斜線，所以我們可以利用這個特性來繪製三角形：

    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;