2012 web technology by RGBA group

RGBA 社群在 2012 年最常被詢問的問題大集合，包含了 重新認識 Web Design、工具軟體、使用 SASS、顏色與形狀、Web 字體、RWD 圖與文、Hi-DPI 設計...

Transcript

1. 9 2012 ⋧㏧ု⨶᥵⍂ۢݨ &WFO
   8V
2. ⱨگ ‣ ۢݨḑ਒ޔ௡ࢢትۢݨḑ㌢ޔ ‣ ӱவዅ
   
   ൖ
   3(#"
   ݞ㐘㌉ ‣ ᜥፒ
   2
   
   "
   ࡻ᨟⼏፭⸽௡ዅʬϫ
   2
   
   "
3. ƛ &WFO ƛ ⋣㏣⭶⭟ഥ ƛ FWFOEFTJHO
   ༦㉊⭶⭟ ƛ NPCJMF
   ৠ᳜ፇ௫
   5IF
   8BMM ƛ ⋍᫙
   3(#"
   ῢ⏪ "#065
   .&
4. ๏ ⋣㏣⭶⭟⑫ፎ ๏ ม
   
   ⵍⵖ⼱
   
   ॆ⑫ፎ ๏ ๖⬋ʱᙖ˯ ๏ ṕխ̙ஂ።ƫᚖ⼞ʱƬ▐⻇㡛 ๏ IUUQSHCBUX
5. 3(#"
   
   ݞ⼵ḕ ⮿ⱟ
   8FC
   %FTJHO Αᴣ
   4$44 㐟◠▒෺᭵ 8FC
   ୗ㕸 38%
   ࢘▒ቕ )J%1*
   ⭺⭣
6. ͸ྰ⮪ だተ⮿ⱟ
   8FC
   %FTJHO
7. 1024 x 768
9. ᵑഌ
10. Ղᬝ
11. ̩
    
    ஻᨟छῂЦʬϫ⋣⃳ڒ 0,
    ⇄ޢ ʪ൘บՁ㋩⌄ ͹⒀⼱
    3FTQPOTJWF
    %FTJHO
    ޹㡮 བྷ˯࿝ḑ࢘▎Ꮜᕀ⾱⬋ぜΙ˯
12. ݞ㐜ࢢܛ⪚㡳 ✓ ⬙⬰ʵ℻ት⬕ᐩ ✓ ˶ֽ຀೽ ✓ ⭄Ꮅ൷ࢇஂ ✓ ፫Ιխ⼋ऽཪ
13. ᨣͭ⬏だተ⮿ⱟ㡳 ✓ "HJMF
    ✓ ೸⁰㌴⬋ ✓ ፄ৙⭄Ꮅ൷ơፄ৙⪓⏀ ✓ ⭶⭟ᇪӑ෧຀㕸
14. ⋧㏧ʳወ
    ᵑഌ ࿼̩࿝ϰ⬋ἃ⼶
15. ᵕᩬˤʳወʪ₋㗔⨶
16. ⋧㏧ወ
    ⴁ⭤ឮ
19. ¡ ၄
24. 5IF
    .BUSJY
    
25. 5IF
    .BUSJY
    
26. ⋣㏣⭶⭟ዅ ⴁ⭤ឮ ḑቂ᱙
27. ͸ྰ⮪ Αᴣ
    4$44
28. ػᴞ
    $44
    ፕ̍㞬ݞ㐜㡳 ✓ ᜥፒ೷᭱஺᝖ ✓ ᜥፒⱽቆ ✓ ᜥ⻇᝖Ц⭟Ⅼ ✓ ᜥ⻇᝖஺
    GVODUJPO
    ぜ⪯Βᴟ ✓ ᜥፒታθḑ
    JFIBDL
    ⭄ᜐታᐲ
29. ᨣͭ⬏ᴣ
    4$44㡳 ✓ ፒ೷᭱஺᝖ ✓ ፒⱽቆ ✓ ٩Ц⭟Ⅼ ✓ ٩஺
    NJYJO
    ぜ⪯Βᴟ ✓ ፒታθḑ
    JFIBDL
    ⭄ᜐታᐲ
    CZ
    DPNQBTT
30. ᄂ⠩Αᴣ
    'JSFBQQ
    ᆿ஼
    4$44 ✓ IUUQGJSFBQQIBOEMJOPDPN ✓ NFOVCBS
    ⒳ዬ⁰෇ ✓ ൎ͹ံ
    4$44
    ⺨᨟
    $44 ✓ ⽞ፒӱ̝
    XFC
    ⭶⭟ณ਒ᴟḑ֤ⓗ
31. .article { font-family: sans-serif; } .article a { color: blue; } .article { font-family: sans-serif; a { color: blue; } } ೹᭵ /FTUJOH
32. .content-navigation { border-color: #3bbfce; color: #2b9eab; margin: 8px; } $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); margin: $margin / 2; } ⲁ቉ 7BSJBCMFT
33. @mixin table-base($padding) { th { text-align: center; font-weight: bold; } td, th { padding: $padding; } } .table { @include table-base(2px); } .data { @include table-base(10px); } .table th { text-align: center; font-weight: bold; } .table td, .table th { padding: 2px; } .data th { text-align: center; font-weight: bold; } .data td, .data th { padding: 10px; } 4$44
    .JYJOT $44
34. @import "compass"; .author-link { @include float-left; @include link-colors(blue, red); } DPNQBTT
    TDTT
    GSBNFXPSL .author-link { display: inline; float: left; color: blue; } .author-link:hover { color: red; } 1 2
35. @import "compass"; .logo { @include replace-text-with-dimensions("logo.png"); } DPNQBTT
    TDTT
    GSBNFXPSL .logo { text-indent: -119988px; overflow: hidden; text-align: left; background-image: url('/images/logo.png?1357639334'); background-repeat: no-repeat; background-position: 50% 50%; width: 214px; height: 50px; }
36. 4$44
    
    $PNQBTT ƛ 4$44 IUUQTBTTMBOHDPN ƛ $PNQBTT IUUQDPNQBTTTUZMFPSH
37. 㐛◜▎෷᭱ ⋣㏣⭶⭟˥ྭ⮦ᝥ༦ḑ
39. ᠩḕ᚝ᠱḕだ
41. ◠だぢፑࡻᨣⒷዯ⑁ሡⲁ
43. ㍻₟ৡḕ᚝௓ḕだ
44. ⯞ۙ
45. ̖ৢৢᛖṺਔ $y: #fcd208; .title { color: $y; border-bottom: 5px solid $y; } ̖ৢৢᛖṺਔ $y: #fcd208; $dark-y: darken($y, 10%); .title { color: $y; border-bottom: 5px solid $dark-y; } 㐟◠㌚ᩬʪᕿ͠
    CPSEFS
    ةፕ⹵̈ḕ༵ٖ㡳 ࿿̨࿠ϯ⬏⊰˯
    CPSEFS
    ᚝ቕୗ⁶ጌḕ㐟◠
46. ਙᏂʳૹᑾḕ⮩㡫௣஼࿟
    NJYJO
    ڒ㡳 @mixin title-and-border($color) { color: $color; border-bottom: 5px solid darken($color, 10%); } ℿ͸ᚙᘢ⬏ᴣ⼓ᕿ௣⨲ˮ㡮 .title { @include title-and-border(#fcd208); }
48. ʫᕼḑ㉖㋣㡬
49. Ӱவ̌ẎṬⵋΘʴʫᕼ
52. NOA 5ZQFGBDF 'VUVSB
53. 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜
54. .circle { margin-left: -3px; } 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動，前情侶臉書鬧翻，影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙，我對你，今天 ⼤大哥說，早上喝著咖啡，你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近，雖受過欺負，這說是野蠻 的慣習，親戚們多贊稱我，但現在的曆法，覺得 分外悠遠，前回不是因得到勝利（他⼀一⼈人的批 判），實在是無意義的競爭，聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜
55. Sign in Sign up password username Sign in Sign up password username
56. .btn:first-child { margin-left: -3px; } Sign in Sign up password username Sign in Sign up password username
57. 8FC
    ୗ㕸 ِ̩ፎ⼫՚ḑݞ㐘
60. ᨣ̍㞬˄ቕୗ⽸㞬〸㡳 ๏ ஆ࿶℀ḑ㌱┗୕㕴ፒ㊶ ๏ 8JO
    ㏰⭶
    Ï
    ቭ⊁ኯ㕴 ๏ .BD
    ㏰⭶
    Ï
    㞴㕴5$ ๏ ٵൕ٪ʵ⊶ʬ ๏ ୕㕴܃ⴗ೽
61. ਙͭ⭈᜔㡳 ๏ 'MBTI
    Ï
    ṕխፒয়ぞ⪓⏀ʵሗᄺ'MBTI ๏ ࢘ᬜ
    Ï
    ͙ፖࠨⳚᇓয়ơ෧຀
    ;[[ ๏ $BOWBT
    Ï
    ⭶⭟ഥʵፎᴟ
    ;[[ ๏ !GPOUGBDF
    Ï
    ⭶ஂ⪯㌜ơ୕ࣘფᘐ
    ;[[
    ␽ʺᗃᐲⵖয়
62. ㌮℄ୗ㕸ፙׁ
63. 8FCGPOUT
    ፙׁ ๏ 5ZQFLJU
    Ï
    ᙁቒ IUUQTUZQFLJUDPN ๏ +VTUGPOU
    Ï
    ˆቒ㡢⍑ ⇄㡣 IUUQXXXKVTUGPOUDPN ๏ 5ZQFTRVBSF
    ነቒ IUUQUZQFTRVBSFDPN
69. ʪ஄⬏ᴣናቕ੓ٽ
    5@5
72. 8JOEPXT .BD #FGPSF
73. 8JOEPXT .BD "GUFS
74. ⶤൗ٪⊺ʪୗࣘ
75. ု⨶ݞ㐜 㕍 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 ⻈⮻ٸ᝖
    EPNBJO нᡄ͹⬋ḑ୕ ځ
    TFSWFS
    ⬋ᛩ⊓ٸ୕㕴 ʳ⹶୕㕴 ᡊᏤՁᎵ ୕㕴ʳ⹶୹࿜
76. ୗ㕸㉐᫽ݞ㐜 '065
    
    'MBTI
    PG
    6OTUZMFE
    5FYU
    
    ๏ IUUQEFNPFWFOEFTJHOUX
77. ⭺⭣ധ༐⬏ᄁ՟ፇ৛㡠 ๏ ʵ⬋㐳ῠ〴୕
    Ï
    Өය୕Ӕ㋹⡃㡮 ๏ ℻୕㕴⹶ӧทӻ㐳ῠ୕㕴 ๏ ഏ፟㐳ῠḑዏϸ٩̩ፄᏥۙ
78. 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 XGMPBEJOH XGBDUJWF PS 讀取失敗時... XGJOBDUJWF <html class="wf-loading" > <html class="wf-active" > <html class="wf-inactive" >
79. .title { // title style here }
80. .title { // title style here .wf-loading & { visibility: hidden; } .wf-active & { visibility: visible; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ
81. .title { // title style here @include transition(opacity .3s linear); .wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } } ⱺٕዒʳ㐷ῤ ⱺٕ࿟֤ዒ㐷ῤ ⑁ʸᴣ᠚ӧḕቶ්㐷ῤ㡠
82. %FGBVMU
    04 $POEFOTFE
    'POU
    5ZQFLJU ৡ௑˯㡮 .wf-active .date { font-size: 2em; }
83. ု⨶ݞ㐜 ‣ ୕㕴ፖׁݘϱ⃳ ‣ Βᴟ␹₼ᩨ
    ᜥ⼙⋣ 㕍
84. .title { // title style here @include transition(opacity .3s linear); .wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } .wf-inactive & { visibility: visible; opacity: 1; font-family: helvetcia, arial, sans-serif; } } ፙׁ৩ሪḕዒϷˤ٩̨⢫⏄
85. 3FTQPOTJWF
    %FTJHO ࢘ቒḑቭݞ㐘
86. ࢘
87. 1 2 1
88. ࢘ḕ᭵ᝈ <img src="foo.png"> @media (max-width: 320px) { img { max-width: 100%; } }
89. ࢘ḕ᭵ᝈ <img src="foo.png" height="640" width="480"> @media (max-width: 320px) { img { max-width: 100%; height: auto; } }
90. 1 2 1 2
91. 0px 0px IFSF Loading...
92. 1 2 Onload! 85'
93. ⭈᜔ݞ㐜 ƛ ࿝ϰഏ፟࢘ᬜⱶٕ˘խḑ㕸൷ࢇஂ ƛ ᪊ᬜ࿡ขᬜḑᚚΝ
    
    
    
    
    
    
94. ⭈᜔ݞ㐜 100% auto img { width: 100%; height: auto; }
95. ⭈᜔ݞ㐜 100% 100% / 16 * 9 img { width: 100%; height: 100% / 16 * 9; }
96. ⭈᜔ݞ㐜 .img-wrapper { position: relative; width: 100%; height: 0; padding-top: 100% / 16 * 9; } img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .img-wrapper <img>
97. Ҽ⎟㟂 ƛ ٤ⓗࢇஂᚚΝ ƛ ㊣ᙎდֽ ƛ ࢘ᬜơขᬜḒ٩ ƛ ขᬜ௛ӱ⽆ᴟ㡢ൟ˚⾱ዅ℻ᚚ㡣
98. ቕ
100. 1 咳咳，我現在還沒出 全⼒力呢...
101. 咳咳，我還沒出全⼒力 呢... ⽘௬
102. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬
103. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬
104. IUUQTHJUIVCDPNESZNBO.BDIPKT
105. 咳咳，我還沒出全⼒力 呢... ⽘௬
106. 咳咳，我還沒出 全⼒力呢... ⽢٩̨
107. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬
108. 卡卡弱特，你⾝身為賽亞 ⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨
109. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬
110. 卡卡弱特，你⾝身為賽亞⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨
111. IUUQTHJUIVCDPNESZNBO.BDIPKT
112. )J%1* 
     3FUJOB
     EJTQMBZ
113. )J%1*
     ፕ̍㞬ਔ㡳 ✓ቭᤰ ✓࢘ᬜ㐳ῠፄᠳይ ✓ፄ஖ኴ㉬ⱶḑቒ୕
114. ሚᄽ
     )J%1*
     ፕ̍㞬ʳਔ㡳 ✓࢘ᗃⱽয়˯ ✓░ᦫ⬲ࠨ๪㞨⻇㡮 ✓ᬀာ⨱஑ᙛ͹ḑVTFS
115. ̖ৢʳⰫ࢘
116. ᴣ̨࢘৘ḕ⽖ᇍ㡳
117. ሚᄽ
     )J%1*
     ḕӱ̜⽖ᇍ ✓ $44 ✓ 8FC
     GPOUT ✓ 47(
118. ṏぢΑᴣ
     $44 ✓ ࢖⬶
     CPSEFSSBEJVT ✓ ㋉ข
     CPYTIBEPX
     UFYUTIBEPX ✓ ᤉఅ
     MJOFBSHSBEJFOU
     SBEJBMHSBEJFOU
119. .box { border: 1px solid #ccc; box-shadow: 0 5px 10px rgba(0,0,0,.3); border-radius: 10px; } $44 Αᴟࢗᬜ
120. 8FC
     GPOUT ✓ ᬿᙥḑ୕㕴Βᴟ
     XFC
     GPOUT
     ʵ⬋ᴟ࢘ᬜ ✓ JDPO
     GPOUT ✓ ⎛㞾㡩ޢ◜
121. 8FC
     GPOUT Αᴟࢗᬜ AppWorks
123. TZNCPM
     GPOUT IPWFS XJUIPVU
     GPOUT
124. ٩⩰ᅓ்
125. ʳㅣḕ
     JDPO
     GPOUT
     ⴁᢏ ✓ IUUQTZNCPMTFUDPN
     ✓ IUUQQJDUPTDD
     ✓ IUUQGPSUBXFTPNFHJUIVCDPN'POU "XFTPNF
     ✓ IUUQBEBNXIJUDSPGUDPNDMJNBDPOT GPOU
126. 47(
     47(
     5JOZ ✓ ځぞᗃᐲ㡦ሡয়
     9
     ˥ʵ๱ ✓ ٩෻◜ ✓ *MMVTUSBUPS
     ⪩͵⺨ୖأ٩ ✓ 47(
     5JOZ ✓ ʵሗᄺᕻ∳ơ㋉ข
     ℻⹱⪯㌜ఋ຀
128. ʳሚᄽ
     47(
     ḕ᦯⬶ࠨ ✓ *&
     
     
      ✓ "OESPJE
     
     
     㡢٩̩Ⅼ˯㡣
129. <a class="brand" href="/"> <!--[if IE]> <div class="logo logo_ie"></div> <![endif]--> <!--[if !IE]--> <div class="logo logo_svg"></div> <!--[endif]--> </a> .logo { width: 220px; height: 30px; } .logo_svg { background: image-url("thewall-logo.svg"); } .logo_ie { background: image-url("thewall-logo.png"); } ፏ⇈ޢḕՓቴ
132. 2013 だተ⮿ⱟ
     8FC
     %FTJHO Αᴣ
     4"44 㐟◠▒෺᭵ 8FC
     ୗ㕸 38%
     ࢘▒ቕ )J%1*
     ⭺⭣
133. 5IBOLT ᙍ⻜㌉⊛
     
     ൖ൷
     3(#"
     ݞ㐘㌉ ٍ֥
     IUUQSHCBUX ਗᎿ͹ፒ̵ͮݞ㐘
     ᙍ⻜
     '#
     ⑶⊩࿝ IUUQGBDFCPPLDPNFWFOXV &WFO