How to read the CSS Value Definition Syntax

2015.07.14開催のHigh Tech Osakaで発表したスライド。

Transcript

1. !LPOJUUFS )PX
   UP
   SFBE
   UIF
   $44
   7BMVF
   %FOJUJPO
   4ZOUBY )JHI
   5FDI
   0TBLB
   
   
2. )BSVLJ
   ,POJTIJ IUUQSFE[JOFOFU 8FC
   %JSFDUPS
3. فٗה׃ג䛰׆ַ׃ֻזְ
   倜٥8&#رؠ؎ٝך㣐⾱⵱ BN[OUP[1$MK
   
4. $44
   TQFDJDBUJPO
5. $44
   'POUT
   .PEVMF
   -FWFM
    XXXXPSH53DTTGPOUT
6. $44
   #BDLHSPVOET
   BOE
   #PSEFST
   .PEVMF
   -FWFM
    XXXXPSH53DTTCBDLHSPVOE
7. 7BMVF
   %FOJUJPO
   4ZOUBY
8. $44
   7BMVFT
   BOE
   6OJUT
   .PEVMF
   -FWFM
    EFWXPSHDTTXHDTTWBMVFT
9. $PNQPOFOU
   WBMVF
   UZQFT
   ؝ٝه٦طٝز⦼㘗 ˖ 鎉衝鸐׶ח鎸鶢ׅ׷ؗ٦ٙ٦سBVUPծEJTDזו
   ˖ הד㔲ת׸גְ׷ر٦ة㘗MFOHUIծQFSDFOUBHFזו
   ˖ ⟣䠐ךفٗػذ؍٦הずׄ⦼ך眔㔲׾䭯א㘗ˎCPSEFS XJEUIˏծˎCBDLHSPVOEBUUBDINFOUˏזו
10. $PNQPOFOU
    WBMVF
    DPNCJOBUPST
    ؝ٝه٦طٝز⦼ך穠さ㶨 hoge fuga hoge | fuga hoge || fuga hoge && fuga [ hoge fuga ] [ foo poo ]
11. $PNQPOFOU
    WBMVF
    NVMUJQMJFST
    ؝ٝه٦طٝز⦼ךꆀ䭷㹀㶨 * 0ճҎ্ + 1ճҎ্ ? 0ճ΋͘͠͸1ճ
 {A,B} AճҎ্BճҎԼ
 # ΧϯϚ۠੾Γͷఆ͕ٛ1ճҎ্
 ! ௚લͷάϧʔϓ͕1ճҎ্ άϧʔϓ಺ͷఆ͕ٛলུՄͰ΋1ճҎ্ඞਢ
12. 1SPQFSUZ
    WBMVF
    FYBNQMFT
13. 'text-align' .hoge { text-align: center; } left | right | center | justify
14. 'border-width' .hoge { border-width: 2px 4px; } <line-width>{1,4} <line-width> = <length> | thin | medium | thick
15. 'text-shadow' .hoge { text-shadow: 1px 1px 2px black, 0 0 1em blue; } none | [ <length>{2,3} && <color>? ]# <offset-x> <offset-y> <blur-radius>?
16. 5IBOL
    ZPV