@property ã¯ãCSSããããã£ãç»é²ã»ã«ã¹ã¿ãã€ãºããããã®åŒ·åãªæ©èœã§ãé«åºŠãªCSSæ©èœãè§£ãæŸã¡ãŸããããã«ãããã¹ã¿ã€ã«èšå®ãšã¢ãã¡ãŒã·ã§ã³å¶åŸ¡ã匷åããæ¹æ³ãåŠã³ãŸãããã
CSSããã¹ã¿ãŒãã: @propertyã«ããã«ã¹ã¿ã ããããã£ã®ç»é²
ã«ã¹ã¿ã ããããã£ïŒCSS倿°ãšãåŒã°ããŸãïŒã¯ãCSSã®èšè¿°ãšä¿å®ã®æ¹æ³ã«é©åœããããããŸãããåå©çšå¯èœãªå€ãå®çŸ©ã§ããããã«ãªããã¹ã¿ã€ã«ã·ãŒãã®æè»æ§ãšä¿å®æ§ãåäžããŸããããããåã«å€ãå®çŸ©ããã ãã§ãªããã«ã¹ã¿ã ããããã£ãä¿æããå€ã®åããã®åæå€ãç¶æ¿ã®åäœãå®çŸ©ã§ãããã©ãã§ããããïŒããã§@propertyãç»å ŽããŸãã
@propertyãšã¯äœãïŒ
@propertyã¯ãã«ã¹ã¿ã ããããã£ããã©ãŠã¶ã«æç€ºçã«ç»é²ã§ããCSSã¢ããã«ãŒã«ã§ãããã®ç»é²ããã»ã¹ã«ããããã©ãŠã¶ã¯ããããã£ã®æåŸ
ãããåãåæå€ã芪èŠçŽ ããç¶æ¿ãã¹ããã©ããã«é¢ããæ
å ±ãåŸãŸããããã«ããã以äžã®ãããªé«åºŠãªæ©èœãå©çšå¯èœã«ãªããŸãã
- åãã§ãã¯: ã«ã¹ã¿ã ããããã£ã«æ£ããåã®å€ãå²ãåœãŠãããŠããããšãä¿èšŒããŸãã
- ã¢ãã¡ãŒã·ã§ã³: æ°å€ãè²ãªã©ãç¹å®ã®åã®ã«ã¹ã¿ã ããããã£ã«å¯ŸããŠã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ãšã¢ãã¡ãŒã·ã§ã³ãå¯èœã«ããŸãã
- ããã©ã«ãå€: ã«ã¹ã¿ã ããããã£ãæç€ºçã«å®çŸ©ãããŠããªãå Žåã«ããã©ãŒã«ããã¯å€ãæäŸããŸãã
- ç¶æ¿å¶åŸ¡: ã«ã¹ã¿ã ããããã£ã芪èŠçŽ ããå€ãç¶æ¿ãããã©ãããæ±ºå®ããŸãã
ããã¯ãCSS倿°ã«åå®å šæ§ã远å ãããã®ãšèããŠãã ãããããã«ãããããå ç¢ã§äºæž¬å¯èœãªã¹ã¿ã€ã«ã·ãŒããäœæã§ããŸãã
@propertyã®æ§æ
@propertyã«ãŒã«ã¯ã次ã®åºæ¬çãªæ§æã«åŸããŸãã
@property --property-name {
syntax: '<value-syntax>';
inherits: true | false;
initial-value: <value>;
}
åéšåã詳ããèŠãŠã¿ãŸããã:
--property-name: ç»é²ãããã«ã¹ã¿ã ããããã£ã®ååãäºã€ã®ãã€ãã³(--)ã§å§ããå¿ èŠããããŸããsyntax: ããããã£ã®æåŸ ãããå€ã®åãå®çŸ©ããŸããããã¯åãã§ãã¯ãšã¢ãã¡ãŒã·ã§ã³ã«ãšã£ãŠéåžžã«éèŠã§ããå©çšå¯èœãªæ§æå€ã«ã€ããŠã¯ã以äžã§è©³ãã説æããŸããinherits: ããããã£ã芪èŠçŽ ããç¶æ¿ãã¹ããã©ããã瀺ãçåœå€ãæå®ããªãå Žåãããã©ã«ãã¯falseã§ããinitial-value: èŠçŽ ã«æç€ºçã«èšå®ãããŠããªãå Žåã®ããããã£ã®ããã©ã«ãå€ãããã«ãããåžžã«ãã©ãŒã«ããã¯å€ãå©çšå¯èœã«ãªããŸãã
syntaxèšè¿°åã®çè§£
syntaxèšè¿°åã¯ã@propertyã«ãŒã«ã®äžã§æãéèŠãªéšåã§ããã«ã¹ã¿ã ããããã£ã«ã©ã®ãããªçš®é¡ã®å€ãæåŸ
ããããããã©ãŠã¶ã«äŒããŸããäžè¬çãªæ§æå€ãããã€ã瀺ããŸã:
*: ä»»æã®å€ãèš±å¯ããŸããããã¯æã蚱容ç¯å²ã®åºãæ§æã§ãããç»é²ãªãã®æšæºçãªCSS倿°ã®åäœãæ¬è³ªçã«åçŸããŸãããã®äœ¿çšã¯æ§ããã«ããŠãã ããã<length>: é·ãã®å€ïŒäŸ:10px,2em,50%ïŒãæåŸ ããŸããããã«ãããç°ãªãé·ãã®å€éã®ã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãå¯èœã«ãªããŸãã<number>: æ°å€ïŒäŸ:1,3.14,-5ïŒãæåŸ ããŸããäžéæåºŠãã¹ã±ãŒã«ãªã©ã®æ°å€ããããã£ãã¢ãã¡ãŒã·ã§ã³åããã®ã«åœ¹ç«ã¡ãŸãã<percentage>: ããŒã»ã³ããŒãžå€ïŒäŸ:25%,100%ïŒãæåŸ ããŸãã<color>: è²ã®å€ïŒäŸ:#f00,rgb(255, 0, 0),hsl(0, 100%, 50%)ïŒãæåŸ ããŸããã¹ã ãŒãºãªè²ã®ãã©ã³ãžã·ã§ã³ãšã¢ãã¡ãŒã·ã§ã³ãå¯èœã«ããŸãã<image>: ç»åã®å€ïŒäŸ:url(image.jpg),linear-gradient(...)ïŒãæåŸ ããŸãã<integer>: æŽæ°å€ïŒäŸ:1,-10,0ïŒãæåŸ ããŸãã<angle>: è§åºŠã®å€ïŒäŸ:45deg,0.5rad,200gradïŒãæåŸ ããŸããå転ã®ã¢ãã¡ãŒã·ã§ã³ã«åœ¹ç«ã¡ãŸãã<time>: æéã®å€ïŒäŸ:1s,500msïŒãæåŸ ããŸããã«ã¹ã¿ã ããããã£ãä»ããŠã¢ãã¡ãŒã·ã§ã³ã®æéãé å»¶ãå¶åŸ¡ããã®ã«åœ¹ç«ã¡ãŸãã<resolution>: è§£å床ã®å€ïŒäŸ:300dpi,96dpiïŒãæåŸ ããŸãã<transform-list>: ãã©ã³ã¹ãã©ãŒã 颿°ã®ãªã¹ãïŒäŸ:translateX(10px) rotate(45deg)ïŒãæåŸ ããŸããè€éãªãã©ã³ã¹ãã©ãŒã¡ãŒã·ã§ã³ã®ã¢ãã¡ãŒã·ã§ã³ãå¯èœã«ããŸãã<custom-ident>: ã«ã¹ã¿ã èå¥åïŒæååïŒãæåŸ ããŸããenumã«äŒŒãŠããŸãã<string>: æååã®å€ïŒäŸ:"Hello World"ïŒãæåŸ ããŸããæååã®ã¢ãã¡ãŒã·ã§ã³ã¯äžè¬çã«ãµããŒããããŠããªããããæ³šæããŠãã ããã- ã«ã¹ã¿ã æ§æ: äžèšã®çµã¿åãããšã
|ïŒORïŒã[]ïŒã°ã«ãŒãåïŒã+ïŒ1ã€ä»¥äžïŒã*ïŒ0å以äžïŒã?ïŒ0åãŸãã¯1åïŒæŒç®åã䜿çšããŠãããè€éãªæ§æãäœæã§ããŸããäŸ:<length> | <percentage>ã¯ãé·ããŸãã¯ããŒã»ã³ããŒãžå€ã®ãããããèš±å¯ããŸãã
æ£ããsyntaxãéžæããããšã¯ã@propertyã®çã®åãæŽ»çšããããã«äžå¯æ¬ ã§ãã
@propertyã®å®éã®äŸ
CSSã§@propertyã䜿çšããå
·äœçãªäŸãèŠãŠã¿ãŸãããã
äŸ1: èæ¯è²ã®ã¢ãã¡ãŒã·ã§ã³
ãã¿ã³ã®èæ¯è²ãã¢ãã¡ãŒã·ã§ã³ãããããšããŸãã@propertyã䜿çšããŠèæ¯è²ã®ã«ã¹ã¿ã ããããã£ãç»é²ããCSSãã©ã³ãžã·ã§ã³ã䜿çšããŠã¢ãã¡ãŒã·ã§ã³ãããããšãã§ããŸãã
@property --bg-color {
syntax: '<color>';
inherits: false;
initial-value: #fff;
}
.button {
background-color: var(--bg-color);
transition: --bg-color 0.3s ease;
}
.button:hover {
--bg-color: #f00; /* Red */
}
ãã®äŸã§ã¯ã--bg-colorã«ã¹ã¿ã ããããã£ã<color>æ§æã§ç»é²ããŠããŸããããã¯è²å€ãæåŸ
ããããšãæå³ããŸããinitial-valueã¯çœïŒ#fffïŒã«èšå®ãããŠããŸãããã¿ã³ã«ãããŒãããšã--bg-colorãèµ€ïŒ#f00ïŒã«å€æŽããããã©ã³ãžã·ã§ã³ãèæ¯è²ã®å€åãã¹ã ãŒãºã«ã¢ãã¡ãŒã·ã§ã³ãããŸãã
äŸ2: æ°å€ã§ããŒããŒååŸãå¶åŸ¡ãã
@propertyã䜿çšããŠãèŠçŽ ã®ããŒããŒååŸãå¶åŸ¡ããã¢ãã¡ãŒã·ã§ã³ãããããšãã§ããŸãã
@property --border-radius {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.rounded-box {
border-radius: var(--border-radius);
transition: --border-radius 0.5s ease;
}
.rounded-box:hover {
--border-radius: 20px;
}
ããã§ã¯ã--border-radiusã<length>ãšããŠç»é²ããpxãemã%ãªã©ã®é·ãã®å€ãåãå
¥ããããã«ããŠããŸããåæå€ã¯0pxã§ãã.rounded-boxã«ãããŒãããšãããŒããŒååŸã20pxã«ã¢ãã¡ãŒã·ã§ã³ããŸãã
äŸ3: ã·ã£ããŠãªãã»ããã®ã¢ãã¡ãŒã·ã§ã³
ããã¯ã¹ã·ã£ããŠã®æ°Žå¹³ãªãã»ãããã¢ãã¡ãŒã·ã§ã³ãããããšããŸãã
@property --shadow-offset-x {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.shadowed-box {
box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
transition: --shadow-offset-x 0.3s ease;
}
.shadowed-box:hover {
--shadow-offset-x: 10px;
}
ãã®å Žåã--shadow-offset-xã¯<length>ãšããŠç»é²ãããŠããããã®åæå€ã¯0pxã§ããbox-shadowããããã£ã¯ãã®ã«ã¹ã¿ã ããããã£ãæ°Žå¹³ãªãã»ããã«äœ¿çšããŸãããããŒãããšããªãã»ããã¯10pxã«ã¢ãã¡ãŒã·ã§ã³ããŸãã
äŸ4: ããŒãèšå®ã®ããã®<custom-ident>ã®äœ¿çš
<custom-ident>æ§æã䜿çšãããšãå®çŸ©æžã¿ã®æååå€ã®ã»ãããå®çŸ©ã§ããCSS倿°ã«äºå®äžã®åæåïŒenumïŒãäœæã§ããŸããããã¯ãããŒãèšå®ãç°ãªãç¶æ
ã®å¶åŸ¡ã«åœ¹ç«ã¡ãŸãã
@property --theme {
syntax: '<custom-ident>';
inherits: true;
initial-value: light;
}
:root {
--theme: light; /* Default Theme */
}
body {
background-color: var(--theme) == light ? #fff : #333;
color: var(--theme) == light ? #000 : #fff;
}
.dark-theme {
--theme: dark;
}
ããã§ã¯ã--themeã<custom-ident>æ§æã§ç»é²ãããŠããŸãã@propertyã«ãŒã«èªäœã«ã¯èš±å¯ãããèå¥åã¯æç€ºçã«ãªã¹ããããŠããŸããããã³ãŒãã¯ããããlightãšdarkã§ããããšã瀺åããŠããŸããCSSã¯æ¡ä»¶ä»ãããžãã¯ïŒvar(--theme) == light ? ... : ...ïŒã䜿çšããŠãçŸåšã®ããŒãã«åºã¥ããŠç°ãªãã¹ã¿ã€ã«ãé©çšããŸããèŠçŽ ã«dark-themeã¯ã©ã¹ã远å ãããšãããŒããããŒã¯ã«åãæ¿ãããŸããæ³š: var()ã䜿çšããæ¡ä»¶ä»ãããžãã¯ã¯æšæºCSSã§ã¯ãªããéåžžããªããã»ããµãŸãã¯JavaScriptãå¿
èŠã§ããããæšæºçãªã¢ãããŒãã¯ãCSSã¯ã©ã¹ãšã«ã¹ã±ãŒãã䜿çšããããšã§ã:
@property --theme {
syntax: '<custom-ident>';
inherits: true;
initial-value: light;
}
:root {
--theme: light;
}
body {
background-color: #fff;
color: #000;
}
body[data-theme="dark"] {
background-color: #333;
color: #fff;
}
/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */
ãã®æ¹èšãããäŸã§ã¯ãbodyèŠçŽ ã®data-theme屿§ã䜿çšããŠããŒããå¶åŸ¡ããŸããJavaScriptïŒã³ã¡ã³ãã¢ãŠããããŠããŸãïŒã¯ã屿§ãlightãšdarkã®éã§åãæ¿ããããã«äœ¿çšãããŸããããã¯ãCSS倿°ã䜿çšããããŒãèšå®ã®ããå
ç¢ã§æšæºçãªã¢ãããŒãã§ãã
@propertyã䜿çšããã¡ãªãã
@propertyã䜿çšãããšãããã€ãã®å©ç¹ããããŸãã
- ã³ãŒãã®å¯èªæ§ãšä¿å®æ§ã®åäž: ã«ã¹ã¿ã ããããã£ã«æåŸ ãããå€ã®åãæç€ºçã«å®çŸ©ããããšã§ãã³ãŒããããçè§£ãããããªãããšã©ãŒãçºçãã«ãããªããŸãã
- ã¢ãã¡ãŒã·ã§ã³æ©èœã®åŒ·å:
@propertyã¯ã«ã¹ã¿ã ããããã£ã®ã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ãšã¢ãã¡ãŒã·ã§ã³ãå¯èœã«ããåçã§é åçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããããã®æ°ããªå¯èœæ§ãåºããŸãã - ããã©ãŒãã³ã¹ã®åäž: ãã©ãŠã¶ã¯ãç»é²ãããã«ã¹ã¿ã ããããã£ã䜿çšããèŠçŽ ã®ã¬ã³ããªã³ã°ãæé©åã§ãããããããã©ãŒãã³ã¹ãåäžããŸãã
- åå®å šæ§: ãã©ãŠã¶ã¯ãå²ãåœãŠãããå€ã宣èšãããæ§æãšäžèŽããããšãæ€èšŒããäºæããªãåäœãé²ãããããã°ã容æã«ããŸããããã¯ãå€ãã®éçºè ãã³ãŒãããŒã¹ã«è²¢ç®ããå€§èŠæš¡ãªãããžã§ã¯ãã§ç¹ã«åœ¹ç«ã¡ãŸãã
- ããã©ã«ãå€: æç€ºçã«èšå®ãããŠããªãå Žåã§ããã«ã¹ã¿ã ããããã£ãåžžã«æå¹ãªå€ãæã€ããšãä¿èšŒããããšã§ããšã©ãŒãé²ããCSSã®å ç¢æ§ãåäžãããŸãã
ãã©ãŠã¶ã®äºææ§
2023幎æ«çŸåšã@propertyã¯è¯å¥œã§ãããæ®éçãªãã©ãŠã¶ãµããŒãã§ã¯ãããŸãããChromeãFirefoxãSafariãEdgeãå«ãã»ãšãã©ã®ã¢ãã³ãã©ãŠã¶ã§ãµããŒããããŠããŸããããããå€ããã©ãŠã¶ã§ã¯ãµããŒããããŠããªãå ŽåããããŸãã@propertyãæ¬çªç°å¢ã§äœ¿çšããåã«ãå¿
ãCan I use...ãªã©ã®ãŠã§ããµã€ãã§ææ°ã®ãã©ãŠã¶äºææ§æ
å ±ã確èªããŠãã ããã
å€ããã©ãŠã¶ã«å¯Ÿå¿ããã«ã¯ããã£ãŒãã£ãŒã¯ãšãªïŒ@supportsïŒã䜿çšããŠãã©ãŒã«ããã¯ã¹ã¿ã€ã«ãæäŸã§ããŸãã
@supports (--property: value) {
/* @propertyã䜿çšããã¹ã¿ã€ã« */
}
@supports not (--property: value) {
/* @propertyããµããŒãããªããã©ãŠã¶ã®ãã©ãŒã«ããã¯ã¹ã¿ã€ã« */
}
--propertyãšvalueãå®éã®ã«ã¹ã¿ã ããããã£ãšãã®å€ã«çœ®ãæããŠãã ããã
@propertyã䜿çšãã¹ãã¿ã€ãã³ã°
次ã®ã·ããªãªã§@propertyã®äœ¿çšãæ€èšããŠãã ãã:
- ã«ã¹ã¿ã ããããã£ãã¢ãã¡ãŒã·ã§ã³åããå¿
èŠãããå Žå: ããã
@propertyã®äž»ãªãŠãŒã¹ã±ãŒã¹ã§ããæ£ããæ§æã§ããããã£ãç»é²ãããšãã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãå¯èœã«ãªããŸãã - ã«ã¹ã¿ã ããããã£ã®åå®å
šæ§ã匷å¶ãããå Žå: ã«ã¹ã¿ã ããããã£ãåžžã«ç¹å®ã®åã®å€ãä¿æããããã«ãããå Žåã¯ã
@propertyã䜿çšããŠç»é²ããŸãã - ã«ã¹ã¿ã ããããã£ã«ããã©ã«ãå€ãæäŸãããå Žå:
initial-valueèšè¿°åã䜿çšãããšããã©ãŒã«ããã¯å€ãæå®ã§ããŸãã - å€§èŠæš¡ãªãããžã§ã¯ãã§:
@propertyã¯ã³ãŒãã®ä¿å®æ§ãé«ãããšã©ãŒãé²ããããå€ãã®éçºè ãé¢ããå€§èŠæš¡ãªãããžã§ã¯ãã§ç¹ã«æçã§ãã - åå©çšå¯èœãªã³ã³ããŒãã³ãããã¶ã€ã³ã·ã¹ãã ãäœæããå Žå:
@propertyã¯ãã³ã³ããŒãã³ãéã®äžè²«æ§ãšäºæž¬å¯èœæ§ã確ä¿ããã®ã«åœ¹ç«ã¡ãŸãã
é¿ããã¹ãäžè¬çãªééã
syntaxèšè¿°åãå¿ããããš:syntaxèšè¿°åããªããšããã©ãŠã¶ã¯æåŸ ãããå€ã®åãèªèãããã¢ãã¡ãŒã·ã§ã³ãæ£ããæ©èœããŸããã- ééã£ã
syntaxå€ã䜿çšããããš: 誀ã£ãæ§æãéžæãããšãäºæããªãåäœã«ã€ãªããå¯èœæ§ããããŸããæåŸ ãããå€ã®åãæ£ç¢ºã«åæ ããæ§æãéžæããããã«ããŠãã ããã initial-valueãæäŸããªãããš: åæå€ããªããšãã«ã¹ã¿ã ããããã£ãæªå®çŸ©ã«ãªãããšã©ãŒã«ã€ãªããå¯èœæ§ããããŸããåžžã«é©åãªããã©ã«ãå€ãæäŸããŠãã ããã*ãæ§æãšããŠé床ã«äœ¿çšããããš: 䟿å©ã§ããã*ã䜿çšãããšåãã§ãã¯ãšã¢ãã¡ãŒã·ã§ã³ã®å©ç¹ã倱ãããŸããæ¬åœã«ä»»æã®åã®å€ãèš±å¯ããå¿ èŠãããå Žåã«ã®ã¿äœ¿çšããŠãã ããã- ãã©ãŠã¶ã®äºææ§ãç¡èŠããããš: åžžã«ãã©ãŠã¶ã®äºææ§ã確èªããå€ããã©ãŠã¶åãã®ãã©ãŒã«ããã¯ã¹ã¿ã€ã«ãæäŸããŠãã ããã
@propertyãšCSS Houdini
@propertyã¯ãCSS HoudiniãšåŒã°ããäžé£ã®APIã®äžéšã§ããHoudiniã䜿çšãããšãéçºè
ã¯ãã©ãŠã¶ã®ã¬ã³ããªã³ã°ãšã³ãžã³ã掻çšããã¹ã¿ã€ã«èšå®ãšã¬ã€ã¢ãŠãããã»ã¹ããã€ãŠãªãã»ã©å¶åŸ¡ã§ããŸãããã®ä»ã®Houdini APIã«ã¯æ¬¡ã®ãã®ããããŸãã
- Paint API: ã«ã¹ã¿ã ã®èæ¯ç»åãšããŒããŒãå®çŸ©ã§ããŸãã
- Animation Worklet API: ãã©ãŠã¶ã®ã³ã³ããžã¿ãŒ ã¹ã¬ããã§çŽæ¥å®è¡ããã髿§èœãªã¢ãã¡ãŒã·ã§ã³ãäœæããæ¹æ³ãæäŸããŸãã
- Layout API: ã«ã¹ã¿ã ã¬ã€ã¢ãŠãã¢ã«ãŽãªãºã ãå®çŸ©ã§ããŸãã
- Parser API: ãã©ãŠã¶ã®CSSããŒãµãŒã«ã¢ã¯ã»ã¹ã§ããŸãã
@propertyã¯æ¯èŒçåŠç¿ããããHoudini APIã§ãããããé«åºŠãªHoudiniæ©èœãæ¢çŽ¢ãããã£ãããšãªããŸãã
çµè«
@propertyã¯ãã«ã¹ã¿ã ããããã£ã®é«åºŠãªæ©èœãè§£ãæŸã€åŒ·åãªCSSã¢ããã«ãŒã«ã§ããã«ã¹ã¿ã ããããã£ããã©ãŠã¶ã«ç»é²ããããšã§ãåå®å
šæ§ã匷å¶ããã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãæå¹ã«ããCSSã³ãŒãå
šäœã®å
ç¢æ§ãåäžãããããšãã§ããŸãããã©ãŠã¶ã®ãµããŒãã¯æ®éçã§ã¯ãããŸããããç¹ã«å€§èŠæš¡ãªãããžã§ã¯ãããã¶ã€ã³ã·ã¹ãã ã§ã®@propertyã®äœ¿çšã®å©ç¹ã¯ãææ°ã®ãŠã§ãéçºã«ãšã£ãŠè²ŽéãªããŒã«ãšãªã£ãŠããŸãã@propertyãæŽ»çšããŠãCSSã¹ãã«ã次ã®ã¬ãã«ã«åŒãäžããŸãããïŒ