2012 web technology by RGBA group

F8ca23da626499de4b476d7ccaf2950b?s=47 evenwu
January 12, 2013

2012 web technology by RGBA group

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

F8ca23da626499de4b476d7ccaf2950b?s=128

evenwu

January 12, 2013
Tweet

Transcript

  1. 9 2012 ⋧㏧ု⨶᥵⍂ۢݨ &WFO8V

  2. ⱨگ ‣ ۢݨḑ਒ޔ௡ࢢትۢݨḑ㌢ޔ ‣ ӱவዅൖ3(#"ݞ㐘㌉ ‣ ᜥፒ2"ࡻ᨟⼏፭⸽௡ዅʬϫ2"

  3. ƛ &WFO ƛ ⋣㏣⭶⭟ഥ ƛ FWFOEFTJHO༦㉊⭶⭟ ƛ NPCJMF ৠ᳜ፇ௫ 5IF8BMM

    ƛ ⋍᫙3(#"ῢ⏪ "#065.&
  4. ๏ ⋣㏣⭶⭟⑫ፎ ๏ มⵍⵖ⼱ॆ⑫ፎ ๏ ๖⬋ʱᙖ˯ ๏ ṕխ̙ஂ።ƫᚖ⼞ʱƬ▐⻇㡛 ๏ IUUQSHCBUX

  5. 3(#"ݞ⼵ḕ ⮿ⱟ8FC%FTJHO Αᴣ4$44 㐟◠▒෺᭵ 8FCୗ㕸 38%࢘▒ቕ )J%1*⭺⭣

  6. ͸ྰ⮪ だተ⮿ⱟ8FC%FTJHO

  7. 1024 x 768

  8. None
  9. ᵑഌ

  10. Ղᬝ

  11. ̩஻᨟छῂЦʬϫ⋣⃳ڒ 0,⇄ޢ ʪ൘บՁ㋩⌄ ͹⒀⼱3FTQPOTJWF%FTJHO޹㡮 བྷ˯࿝ḑ࢘▎Ꮜᕀ⾱⬋ぜΙ˯

  12. ݞ㐜ࢢܛ⪚㡳 ✓ ⬙⬰ʵ℻ት⬕ᐩ ✓ ˶ֽ຀೽ ✓ ⭄Ꮅ൷ࢇஂ ✓ ፫Ιխ⼋ऽཪ

  13. ᨣͭ⬏だተ⮿ⱟ㡳 ✓ "HJMF ✓ ೸⁰㌴⬋ ✓ ፄ৙⭄Ꮅ൷ơፄ৙⪓⏀ ✓ ⭶⭟ᇪӑ෧຀㕸

  14. ⋧㏧ʳወᵑഌ ࿼̩࿝ϰ⬋ἃ⼶

  15. ᵕᩬˤʳወʪ₋㗔⨶

  16. ⋧㏧ወⴁ⭤ឮ

  17. None
  18. None
  19. ¡ ၄

  20. None
  21. None
  22. None
  23. None
  24. 5IF.BUSJY 

  25. 5IF.BUSJY 

  26. ⋣㏣⭶⭟ዅ ⴁ⭤ឮ ḑቂ᱙

  27. ͸ྰ⮪ Αᴣ4$44

  28. ػᴞ$44ፕ̍㞬ݞ㐜㡳 ✓ ᜥፒ೷᭱஺᝖ ✓ ᜥፒⱽቆ ✓ ᜥ⻇᝖Ц⭟Ⅼ ✓ ᜥ⻇᝖஺GVODUJPOぜ⪯Βᴟ ✓

    ᜥፒታθḑJFIBDL⭄ᜐታᐲ
  29. ᨣͭ⬏ᴣ4$44㡳 ✓ ፒ೷᭱஺᝖ ✓ ፒⱽቆ ✓ ٩Ц⭟Ⅼ ✓ ٩஺NJYJOぜ⪯Βᴟ ✓

    ፒታθḑJFIBDL⭄ᜐታᐲ CZDPNQBTT
  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 TDTTGSBNFXPSL .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 TDTTGSBNFXPSL .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. 㐛◜▎෷᭱ ⋣㏣⭶⭟˥ྭ⮦ᝥ༦ḑ

  38. None
  39. ᠩḕ᚝ᠱḕだ

  40. None
  41. ◠だぢፑࡻᨣⒷዯ⑁ሡⲁ

  42. None
  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); }
  47. None
  48. ʫᕼḑ㉖㋣㡬

  49. Ӱவ̌ẎṬⵋΘʴʫᕼ

  50. None
  51. None
  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ୗ㕸 ِ̩ፎ⼫՚ḑݞ㐘

  58. None
  59. None
  60. ᨣ̍㞬˄ቕୗ⽸㞬〸㡳 ๏ ஆ࿶℀ḑ㌱┗୕㕴ፒ㊶ ๏ 8JO㏰⭶Ïቭ⊁ኯ㕴 ๏ .BD㏰⭶Ï㞴㕴5$ ๏ ٵൕ٪ʵ⊶ʬ ๏

    ୕㕴܃ⴗ೽
  61. ਙͭ⭈᜔㡳 ๏ 'MBTIÏṕխፒয়ぞ⪓⏀ʵሗᄺ'MBTI ๏ ࢘ᬜÏ͙ፖࠨⳚᇓয়ơ෧຀;[[ ๏ $BOWBTÏ⭶⭟ഥʵፎᴟ;[[ ๏ !GPOUGBDFÏ ⭶ஂ⪯㌜ơ୕ࣘფᘐ;[[␽ʺᗃᐲⵖয়

  62. ㌮℄ୗ㕸ፙׁ

  63. 8FCGPOUTፙׁ ๏ 5ZQFLJUÏᙁቒ IUUQTUZQFLJUDPN ๏ +VTUGPOUψቒ㡢⍑ ⇄㡣 IUUQXXXKVTUGPOUDPN ๏ 5ZQFTRVBSFነቒ

    IUUQUZQFTRVBSFDPN
  64. None
  65. None
  66. None
  67. None
  68. None
  69. ʪ஄⬏ᴣናቕ੓ٽ5@5

  70. None
  71. None
  72. 8JOEPXT .BD #FGPSF

  73. 8JOEPXT .BD "GUFS

  74. ⶤൗ٪⊺ʪୗࣘ

  75. ု⨶ݞ㐜 㕍 㐷ῤ Ө඼ୗ㕸 ୗ㕸㉐᫽ 㐷ῤ ተḕୗ㕸 ⻈⮻ٸ᝖EPNBJO нᡄ͹⬋ḑ୕ ځTFSWFS⬋ᛩ⊓ٸ୕㕴

    ʳ⹶୕㕴 ᡊᏤՁᎵ ୕㕴ʳ⹶୹࿜
  76. ୗ㕸㉐᫽ݞ㐜 '065 'MBTIPG6OTUZMFE5FYU ๏ 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. 1 2 1

  87. ࢘ḕ᭵ᝈ <img src="foo.png"> @media (max-width: 320px) { img { max-width:

    100%; } }
  88. ࢘ḕ᭵ᝈ <img src="foo.png" height="640" width="480"> @media (max-width: 320px) { img

    { max-width: 100%; height: auto; } }
  89. 1 2 1 2

  90. 0px 0px IFSF Loading...

  91. 1 2 Onload! 85'

  92. ⭈᜔ݞ㐜 ƛ ࿝ϰഏ፟࢘ᬜⱶٕ˘խḑ㕸൷ࢇஂ ƛ ᪊ᬜ࿡ขᬜḑᚚΝ

  93. ⭈᜔ݞ㐜 100% auto img { width: 100%; height: auto; }

  94. ⭈᜔ݞ㐜 100% 100% / 16 * 9 img { width:

    100%; height: 100% / 16 * 9; }
  95. ⭈᜔ݞ㐜 .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>
  96. Ҽ⎟㟂 ƛ ٤ⓗࢇஂᚚΝ ƛ ㊣ᙎდֽ ƛ ࢘ᬜơขᬜḒ٩ ƛ ขᬜ௛ӱ⽆ᴟ㡢ൟ˚⾱ዅ℻ᚚ㡣

  97. 1

  98. 1 咳咳,我現在還沒出 全⼒力呢...

  99. 咳咳,我還沒出全⼒力 呢... ⽘௬

  100. 卡卡弱特,你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬

  101. 卡卡弱特,你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬

  102. IUUQTHJUIVCDPNESZNBO.BDIPKT

  103. 咳咳,我還沒出全⼒力 呢... ⽘௬

  104. 咳咳,我還沒出 全⼒力呢... ⽢٩̨

  105. 卡卡弱特,你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬

  106. 卡卡弱特,你⾝身為賽亞 ⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨

  107. 卡卡弱特,你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬

  108. 卡卡弱特,你⾝身為賽亞⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨

  109. IUUQTHJUIVCDPNESZNBO.BDIPKT

  110. )J%1* 3FUJOBEJTQMBZ

  111. )J%1*ፕ̍㞬ਔ㡳 ✓ቭᤰ ✓࢘ᬜ㐳ῠፄᠳይ ✓ፄ஖ኴ㉬ⱶḑቒ୕

  112. ሚᄽ)J%1*ፕ̍㞬ʳਔ㡳 ✓࢘ᗃⱽয়˯ ✓░ᦫ⬲ࠨ๪㞨⻇㡮 ✓ᬀာ⨱஑ᙛ͹ḑVTFS

  113. ̖ৢʳⰫ࢘

  114. ᴣ̨࢘৘ḕ⽖ᇍ㡳

  115. ሚᄽ)J%1*ḕӱ̜⽖ᇍ ✓ $44 ✓ 8FCGPOUT ✓ 47(

  116. ṏぢΑᴣ$44 ✓ ࢖⬶CPSEFSSBEJVT ✓ ㋉ขCPYTIBEPX UFYUTIBEPX ✓ ᤉఅMJOFBSHSBEJFOU SBEJBMHSBEJFOU

  117. .box { border: 1px solid #ccc; box-shadow: 0 5px 10px

    rgba(0,0,0,.3); border-radius: 10px; } $44 Αᴟࢗᬜ
  118. 8FCGPOUT ✓ ᬿᙥḑ୕㕴ΒᴟXFCGPOUTʵ⬋ᴟ࢘ᬜ ✓ JDPOGPOUT ✓ ⎛㞾㡩ޢ◜

  119. 8FCGPOUT Αᴟࢗᬜ AppWorks

  120. None
  121. TZNCPMGPOUT IPWFS XJUIPVUGPOUT

  122. ٩⩰ᅓ்

  123. ʳㅣḕJDPOGPOUTⴁᢏ ✓ IUUQTZNCPMTFUDPN ✓ IUUQQJDUPTDD ✓ IUUQGPSUBXFTPNFHJUIVCDPN'POU "XFTPNF ✓ IUUQBEBNXIJUDSPGUDPNDMJNBDPOT

    GPOU
  124. 47( 47(5JOZ ✓ ځぞᗃᐲ㡦ሡয়9˥ʵ๱ ✓ ٩෻◜ ✓ *MMVTUSBUPS⪩͵⺨ୖأ٩ ✓ 47(5JOZ

    ✓ ʵሗᄺᕻ∳ơ㋉ข℻⹱⪯㌜ఋ຀
  125. None
  126. ʳሚᄽ47(ḕ᦯⬶ࠨ ✓ *&   ✓ "OESPJE 㡢٩̩Ⅼ˯㡣

  127. <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"); } ፏ⇈ޢḕՓቴ
  128. None
  129. None
  130. 2013 だተ⮿ⱟ8FC%FTJHO Αᴣ4"44 㐟◠▒෺᭵ 8FCୗ㕸 38%࢘▒ቕ )J%1*⭺⭣

  131. 5IBOLT ᙍ⻜㌉⊛ൖ൷3(#"ݞ㐘㌉ ٍ֥IUUQSHCBUX ਗᎿ͹ፒ̵ͮݞ㐘ᙍ⻜'#⑶⊩࿝ IUUQGBDFCPPLDPNFWFOXV &WFO