5分ぐらいでざっくり紹介するCSS4

Transcript

1. ̑෼͘Β͍Ͱͬ͘͟Γ ঺հ͢ΔCSS4 Վ෣ب࠲.tech#9ʮҟछϓϩάϥϛϯάݴޠ֨ಆษڧձʯ
 @deepblue_will
2. ࣗݾ঺հ Goodpatch, Inc. ਿݪปࢤ(͓͋͠) @deepblue_will • ProttͷϑϩϯτΤϯυ୲౰ • Java(SWT) → 
 Ruby(Ruby on Rails) → JavaScript(AngularJS) • LTਓੜ̎ճ໨Ͱ͢ɻ
3. Prott ϓϩτλΠϐϯάπʔϧ
4. Updraft ϑΟʔυόοΫπʔϧ
5. IUUQSFENPOLDPNTPHSBEZMBOHVBHFSBOLJOHT
6. IUUQSFENPOLDPNTPHSBEZMBOHVBHFSBOLJOHT 1 JavaScript 2 Java 3 PHP 4 Python 5 C# 5 C++ 5 Ruby 8 CSS 9 C 10 Objective-C
7. ਓؾͷϓϩάϥϛϯάݴޠʁ CSSͷ࣍ͷ࢓༷(CSS4)Λ ͕࣌ؒڐ͢·Ͱ঺հ͠·͢ʂ
8. ิ଍
9. ิ଍ • CSS4͸·ͩ૲ҊϨϕϧ(Working Draft) • ·ͩ·ͩมΘΔՄೳੑ͕͋Δ • cssnext࢖͏ͱҰ෦࢖͑Δ • PostCSSͷϓϥάΠϯ • http://cssnext.io/
10. css-variables
11. :root { --main-color: #06c; --accent-color: #006; } #foo h1 { color: var(--main-color); } • ʮ--ʯͰม਺Λએݴ • ʮvar()ʯͰม਺Λ࢖༻
12. :root, :root:lang(en) {--external-link: "external link";} :root:lang(de) {--external-link: "externer Link";} a::after {content: " (" var(--external-link) ")"} • ม਺ͷείʔϓΛ෼͚ΒΕΔ
13. :root { --main-color: #c06; --accent-background: linear-gradient(to top, var(--main-color), white); } • ม਺ͷωετ΋Մೳ
14. Selectors Level 4
15. :not(s1, s2) p:not(:first-child, .special) { color: red; } p:not(:first-child):not(.special) { color: red; } • :not()ʹෳ਺ͷҾ਺ΛͱΕΔΑ͏ʹͳΔ
16. :matches(s1, s2) p:matches(:first-child, .special){ color: red; } p:first-child, p.special{ color: red; } • Ҿ਺ͷηϨΫλͷ͍ͣΕ͔ʹϚον͢Δཁૉ
17. :dir(ltr) • HTML5ͷʮdirʯʹϚον • ltr: ࠨ͔Βӈʹ޲͔͏ςΩετ • rtl: ӈ͔Βࠨʹ޲͔͏ςΩετ
18. E:lang(zh, *-hant) • ϫΠϧυΧʔυ(*)Ͱ෦෼Ұக͕ՄೳʹͳΔ • zh͔-hantͷޙํҰக
19. :any-link nav :any-link { background-color: yellow; } nav :link, nav :visited { background-color: yellow; } • :linkͱ:visitedΛ1౓ʹࢦఆͰ͖Δ
20. E:local-link • ϦϯΫઌͷURL͕ϖʔδͱಉ͡URLͷཁૉ • E:local-link(0): υϝΠϯ͕Ұॹ • E:local-link(1): υϝΠϯͱ1ͭ໨ͷύε͕Ұॹ
21. So, given the links: 1. <a href="http://www.example.com">Home</a> 2. <a href="http://www.example.com/2011">2011</a> 3. <a href="http://www.example.com/2011/03">March</a> 4. <a href="http://www.example.com/2011/03/">March</a> 5. <a href="http://www.example.com/2011/03/21">21 March</a> 6. <a href="https://www.example.com/2011/03/">March</a> 7. <a href="http://example.com/2011/03">March</a> and the styles: A. a:local-link {...} B. a:local-link(0) {...} C. a:local-link(1) {...} D. a:local-link(2) {...} E. a:local-link(3) {...} If the document's URL is http://www.example.com/2011/03/: Link 1 would receive Style B Link 2 would receive Styles B and C Link 3 would receive Styles B, C, and D Link 4 would also receive Styles A, B, C, and D Link 5 would receive Styles B, C, and D Link 6 would receive Styles B, C, and D Link 7 would remain unstyled Style E would not be applied to anything
22. E:indeterminate • ஋͕indeterminateͳཁૉʹϚον • checkbox: indeterminate͕true • progress: ஋͕ͳ͍
23. E:default • submitϘλϯ΍ը૾Ϙλϯ • selectཁૉͷoptionͷॳظ஋
24. E:optional • required͕͍ͭͯͳ͍input, textarea, selectʹ Ϛον
25. E:read-only E:read-write • :read-only • readonly͕͍ͭͯΔinput, textarea, selectʹϚ ον • :read-write • readonly͕͍͍ͭͯͳ͍input, textarea, select ʹϚον
26. E:nth-match(n of selector) E:nth-last-match(n of selector) • E:nth-match(3 of .hoge) • E.hogeͷ্͔Β3൪໨ʹϚον • E:nth-last-match(3 of .hoge) • E.hogeͷԼ͔Β3൪໨ʹϚον • E.hoge:nth-child(3)ͱҙຯ͕ҧ͏ • E.hoge͕3൪໨ʹ͋Δ৔߹Ϛον
27. E:column(selector) E:nth-column(n) E:nth-last-column(n) • nth-childͷgrid΍table൛
28. E[foo="bar" i] • େจࣈখจࣈΛແࢹͯ͠Ϛονͤ͞Δ͜ͱ͕ ग़དྷΔଐੑηϨΫλ
29. E /foo/ F • Eͷfooଐੑͱಉ͡஋ͷIDଐੑΛ࣋ͭFཁૉʹ Ϛον • labelͱinputͷඥ෇͚ͱ͔ʹศར • label:matched(:hover, :focus) /for/ input
30. E! > F • Fͷ਌Ͱ͋ΔEཁૉʹϚον
31. CSS Grid Layout Module Level 1
32. display: grid • άϦουϨΠΞ΢τ͕؆୯ʹ࡞ΕΔΑ͏ʹͳ Δ • ৄ͘͠͸ˣ • http://sourcechord.hatenablog.com/entry/ 2015/12/08/235759
33. #grid { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr) auto } #title { grid-column: 1; grid-row: 1 } #score { grid-column: 1; grid-row: 3 } #stats { grid-column: 1; grid-row: 2; align-self: start } #board { grid-column: 2; grid-row: 1 / span 2; } #controls { grid-column: 2; grid-row: 3; justify-self: center } <div id="grid"> <div id="title">Game Title</div> <div id="score">Score</div> <div id="stats">Stats</div> <div id="board">Board</div> <div id="controls">Controls</div> </div>
35. media query Level4
36. Media queries ranges @media (500px <= width <= 1200px) { /* your styles */ } @media (min-width: 500px) and (max-width: 1200px) { /* your styles */ } • min-width, max-widthΛ>=, <=Ͱॻ͚Δ
37. ࢀߟ
38. ࢀߟ • https://www.w3.org/TR/css-variables/ • https://www.w3.org/TR/selectors4/ • https://www.w3.org/TR/css-grid-1/ • https://www.w3.org/TR/mediaqueries-4/
39. ͓͠·͍