Lindsay is observing.....: CSS

閱讀文章要學會整理文章重點，才能好好吸收！
課程來自： http://learn.shayhowe.com/advanced-html-css/
整理方式：Google Docs

小小心得：selector種類越來越多，適用的瀏覽器也不同，瞭解有哪些基礎跟不同用法的 selector，未來使用更能活用。

2013年1月31日星期四

進階 HTML&CSS - 課程2：Detailed Positioning

閱讀文章要學會整理文章重點，才能好好吸收！
課程來自： http://learn.shayhowe.com/advanced-html-css/
整理方式：Google Docs

小小心得：熟悉基礎CSS觀念很重要，float大家愛用，版面配置用起來最常出問題的也正是float，配合 position 的定義，我們更該小心使用跟注意！

http://learn.shayhowe.com/advanced-html-css/

進階 HTML&CSS - 課程1：Performance & Organization

閱讀文章要學會整理文章重點，才能好好吸收！
課程來自： http://learn.shayhowe.com/advanced-html-css/
整理方式：Google Docs

2013年1月17日星期四

來談談 z-index

作者：Philip Walton
文章：What No One Told You About Z-Index
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

看到這篇文章寫得很好，決定用來節錄一下重點

每當 web developer 想要移動HTML上面的元素的前後順序時，第一個直覺都是改變 z-index 數字的大小，但其實 z-index 並沒有想像中這麼簡單。

這個作者請你做了一個實驗，下面是一個簡單的區塊堆疊應用

Check out this Pen!

你要如何讓紅色的區塊被壓到最下面，但你不能

不能改變 HTML 結構
不能修改 z-index 大小
不能修改 position 的值

想到結果了嗎？

Check out this Pen!

你猜對了嗎？作者只加了一段CSS

div:first-child {
  opacity: .99;
}

如果你感到非常疑惑，不要氣餒，因為作者告訴你：W3C的 z-index 規則其實真的很複雜！

堆疊的規則

當 z-index 跟 position 屬性沒有共同存在的時候，元素堆疊的規則可以說是簡單的，就是HTML堆疊的先後。

當 position 屬性存在的時候，任何有 position 的元素會顯示在，沒有position的元素前面 (意思是除 static 之外的 position 屬性，relative、absulute....)

當z-index 跟 position 共同存在的時候，這規則就難了，我把作者整理的順序放在下面

由後往前排序是這樣：

The stacking context's root element
堆疊內容的 root 元素
Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
有 position 屬性的元素(包含子元素) + 負數的 z-index 值 (數字越大越前面)
Non-positioned elements (ordered by appearance in the HTML)
沒有 position 屬性的元素
Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
有 position 屬性的元素(包含子元素) + z-index:auto
Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
有 position 屬性的元素 + 正數 z-index 值(數字越大越前面)

最後，作者說明了上面的例子，整體的順序到底是怎麼改變的

原本的順序是這樣的：

<div><!-- 1 -->
  <span class="red"><!-- 6 --></span>
</div>
<div><!-- 2 -->
  <span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
  <span class="blue"><!-- 5 --></span>
</div>

經過修改後的順序變成這樣：

<div><!-- 1 -->
  <span class="red"><!-- 1.1 --></span>
</div>
<div><!-- 2 -->
  <span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
  <span class="blue"><!-- 5 --></span>
</div>

原本CSS的寫法，我們只有兩層的堆疊內容，root 跟 span.red
當我們在 span.red 的父層 div 設定了透明度 opacity:.99 (div:first-child { opacity: .99; })
我們讓原本的堆疊變成了三層
第一個 div 跟他的子元素都不會吃到 .red 的 z-index 跟 position
他們變成沒有 position 跟 z-index 的元素了
他們的堆疊順序變成按照原本的 HTML 的結構來計算
所以作者用 1 跟 1.1來代表他們後來變成的順序

感謝這位作者，我看完這篇文章頭都昏了，但也終於弄懂 z-index 的層級判別方式

請不再在隨便相信文章裡面寫「這是 z-index 的 bug」了！

2013年3月26日 星期二

2013年3月25日 星期一

2013年3月21日 星期四

2013年3月18日 星期一

2013年3月14日 星期四

2013年3月13日 星期三

2013年3月7日 星期四

2013年3月5日 星期二

2013年2月26日 星期二

2013年2月22日 星期五

2013年2月7日 星期四

2013年2月1日 星期五

2013年1月31日 星期四

2013年1月17日 星期四

2013年3月26日星期二

2013年3月25日星期一

2013年3月21日星期四

2013年3月18日星期一

2013年3月14日星期四

2013年3月13日星期三

2013年3月7日星期四

2013年3月5日星期二

2013年2月26日星期二

2013年2月22日星期五

2013年2月7日星期四

2013年2月1日星期五

2013年1月31日星期四

2013年1月17日星期四