CSS æ°å¤ãã¡ã¯ããªã¼é¢æ°
Baseline
åºãå©ç¨å¯è½
*
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2015å¹´9æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
* ãã®æ©è½ã®ä¸é¨ã¯ã対å¿ã¬ãã«ãç°ãªãå ´åãããã¾ãã
CSS æ°å¤ãã¡ã¯ããªã¼é¢æ°ããã¨ãã° CSS.em() ã CSS.turn() ã¯ãåä½ã使ç¨ããã¡ã½ããåã¨ããæ°å¤ã弿°ã¨ããå¤ã® CSSUnitValues ãè¿ããã®ã§ããã®ã¡ã½ããã使ç¨ããã¨ãæ°å¤å¼æ°ã§åä½ãè¨å®ãããã¨ãã§ãã¾ãããããã®é¢æ°ã¯ CSSUnitValue() ã³ã³ã¹ãã©ã¯ã¿ã¼ã使ããããåé·ã§ãªãæ°ããæ°å¤ãçæãã¾ãã
æ§æ
CSS.number(number)
CSS.percent(number)
// <length>
CSS.em(number)
CSS.ex(number)
CSS.ch(number)
CSS.ic(number)
CSS.rem(number)
CSS.lh(number)
CSS.rlh(number)
CSS.vw(number)
CSS.vh(number)
CSS.vi(number)
CSS.vb(number)
CSS.vmin(number)
CSS.vmax(number)
CSS.cm(number)
CSS.mm(number)
CSS.Q(number)
CSS.in(number)
CSS.pt(number)
CSS.pc(number)
CSS.px(number)
// <angle>
CSS.deg(number)
CSS.grad(number)
CSS.rad(number)
CSS.turn(number)
// <time>
CSS.s(number)
CSS.ms(number)
// <frequency>
CSS.Hz(number)
CSS.kHz(number)
// <resolution>
CSS.dpi(number)
CSS.dpcm(number)
CSS.dppx(number)
// <flex>
CSS.fr(number)
弿°
number-
CSS åä½å¤ã§ä½¿ç¨ãããæ°å¤ã§ãã
è¿å¤
æå®ãããå¤ã¨åä½ãã¤ã㦠CSSUnitValue ãªãã¸ã§ã¯ãã§ãã
ä¾
æ°å¤ãã¡ã¯ããªã¼é¢æ°ã® CSS.vmax() ã使ç¨ã㦠CSSUnitValue ã使ãã¾ãã
const height = CSS.vmax(50);
console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
console.log(height.value); // 50
console.log(height.unit); // vmax
ãã®ä¾ã§ã¯ãè¦ç´ ã®ãã¼ã¸ã³ã CSS.px() ãã¡ã¯ããªã¼é¢æ°ã§è¨å®ãã¾ãã
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
仿§æ¸
| 仿§æ¸ |
|---|
| CSS Typed OM Level 1 > # numeric-factory > |