CSSã®@whenã«ãŒã«ã®åãè§£ãæŸã¡ãåçã§ã¬ã¹ãã³ã·ããªãŠã§ããã¶ã€ã³ãäœæããŸããããã³ã³ããã¯ãšãªãã«ã¹ã¿ã ã¹ããŒãããã®ä»ã®åºæºã«åºã¥ããŠæ¡ä»¶ä»ãã§ã¹ã¿ã€ã«ãé©çšããæ¹æ³ãåŠã³ãŸãã
CSSã®@whenã«ãŒã«ããã¹ã¿ãŒããïŒåçãŠã§ããã¶ã€ã³ã®ããã®æ¡ä»¶ä»ãã¹ã¿ã€ã«é©çš
CSS Conditional Rules Module Level 5仿§ã®äžéšã§ããCSSã®@whenã«ãŒã«ã¯ãç¹å®ã®æ¡ä»¶ã«åºã¥ããŠã¹ã¿ã€ã«ãæ¡ä»¶ä»ãã§é©çšãã匷åãªæ¹æ³ãæäŸããŸããããã¯åŸæ¥ã®ã¡ãã£ã¢ã¯ãšãªãè¶
ããã³ã³ããã®ãµã€ãºãã«ã¹ã¿ã ããããã£ãããã«ã¯èŠçŽ ã®ç¶æ
ã«åºã¥ããŠããããã现ããã¹ã¿ã€ãªã³ã°å¶åŸ¡ãå¯èœã«ããŸããããã«ããããŠã§ããã¶ã€ã³ã®ã¬ã¹ãã³ã·ãæ§ãšé©å¿æ§ã倧å¹
ã«åäžããããŸããŸãªããã€ã¹ãã³ã³ããã¹ãã§ããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
@whenã«ãŒã«ã®åºæ¬ãçè§£ãã
ãã®æ žå¿ã«ãããŠã@whenã«ãŒã«ã¯ç¹å®ã®æ¡ä»¶ãæºããããå Žåã«ã®ã¿CSSã¹ã¿ã€ã«ãããã¯ãå®è¡ããã¡ã«ããºã ãæäŸããŸããããã¯ããã°ã©ãã³ã°èšèªã«ãããifæã«äŒŒãŠããŸããæ§æãåè§£ããŠã¿ãŸãããïŒ
@when condition {
/* æ¡ä»¶ãçã®å Žåã«é©çšããCSSã«ãŒã« */
}
conditionã¯ã以äžãå«ãæ§ã
ãªèŠå ã«åºã¥ããŠããŸãïŒ
- ã³ã³ããã¯ãšãªïŒãã¥ãŒããŒãã§ã¯ãªããèŠçŽ ãå«ã芪èŠçŽ ã®ãµã€ãºã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããŸãã
- ã«ã¹ã¿ã ã¹ããŒãïŒãŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãã¢ããªã±ãŒã·ã§ã³ã®ç¶æ ã«åå¿ããŸãã
- CSS倿°ïŒCSSã«ã¹ã¿ã ããããã£ã®å€ã«åºã¥ããŠã¹ã¿ã€ã«ãé©çšããŸãã
- ç¯å²ã¯ãšãªïŒå€ãç¹å®ã®ç¯å²å ã«ãããã©ããããã§ãã¯ããŸãã
@whenã®åã¯ãçã«ã³ã³ããŒãã³ãããŒã¹ã®ã¹ã¿ã€ãªã³ã°ãäœæã§ããèœåã«ãããŸããã¹ã¿ã€ãªã³ã°ããžãã¯ãã³ã³ããŒãã³ãå
ã«ã«ãã»ã«åããåšå²ã®ããŒãžã¬ã€ã¢ãŠãã«é¢ä¿ãªããã³ã³ããŒãã³ããç¹å®ã®åºæºãæºããããšãã«ã®ã¿é©çšãããããã«ããããšãã§ããŸãã
@whenã䜿ã£ãã³ã³ããã¯ãšãª
ã³ã³ããã¯ãšãªã¯ãã¬ã¹ãã³ã·ããã¶ã€ã³ã«ãããã²ãŒã ãã§ã³ãžã£ãŒã§ããããã«ãããèŠçŽ ã¯ãã¥ãŒããŒãã®å¹
ã ãã§ãªãã芪ã³ã³ããã®å¯žæ³ã«åºã¥ããŠã¹ã¿ã€ãªã³ã°ãé©å¿ãããããšãã§ããŸããããã«ãããããæè»ã§åå©çšå¯èœãªã³ã³ããŒãã³ããå¯èœã«ãªããŸããçããµã€ãããŒã«é
眮ãããå Žåãšãåºãã¡ã€ã³ã³ã³ãã³ããšãªã¢ã«é
眮ãããå Žåã§è¡šç€ºãç°ãªãã«ãŒãã³ã³ããŒãã³ããæ³åããŠã¿ãŠãã ããã@whenã«ãŒã«ã¯ãããéåžžã«ç°¡åã«ããŸãã
åºæ¬çãªã³ã³ããã¯ãšãªã®äŸ
ãŸããã³ã³ããã宣èšããå¿
èŠããããŸããããã¯container-typeããããã£ã䜿çšããŠè¡ãããšãã§ããŸãïŒ
.container {
container-type: inline-size;
}
inline-sizeã¯ãã³ã³ããããã®ã€ã³ã©ã€ã³ãµã€ãºïŒæ°Žå¹³æžåã¢ãŒãã§ã¯å¹
ãåçŽæžåã¢ãŒãã§ã¯é«ãïŒã«åºã¥ããŠã¯ãšãªãããããšãèš±å¯ããŸããäž¡æ¹ã®æ¬¡å
ãã¯ãšãªããã«ã¯sizeã䜿çšããããšããã¯ãšãªã³ã³ãããäœæããªãå Žåã¯normalã䜿çšããããšãã§ããŸãã
ããã§ã@containerïŒãã°ãã°@whenãšçµã¿åãããŠäœ¿çšãããïŒã䜿çšããŠãã³ã³ããã®ãµã€ãºã«åºã¥ããŠã¹ã¿ã€ã«ãé©çšã§ããŸãïŒ
@container (min-width: 300px) {
.card {
flex-direction: row;
align-items: center;
}
.card__image {
width: 100px;
height: 100px;
}
}
@container (max-width: 299px) {
.card {
flex-direction: column;
align-items: flex-start;
}
.card__image {
width: 100%;
height: auto;
}
}
ãã®äŸã§ã¯ã.cardã®ã¬ã€ã¢ãŠãã¯ã³ã³ããã®å¹
ã«åºã¥ããŠå€åããŸããã³ã³ããã®å¹
ã300px以äžã®å Žåãã«ãŒãã¯ç»åãšããã¹ãã䞊ã¹ãŠè¡šç€ºããŸããããããçãå Žåããããã¯åçŽã«ç©ã¿éãªããŸãã
以äžã¯ã@whenã䜿çšããŠåãçµæãéæããæ¹æ³ã§ããããã¯ãã©ãŠã¶ã®ãµããŒããã³ãŒãã£ã³ã°ã®å¥œã¿ã«ãã£ãŠã¯@containerãšçµã¿åãããããšãã§ããŸãïŒ@whenã¯ã³ã³ãããµã€ãºã ãã§ãªããããã€ãã®ã·ããªãªã§ããæè»æ§ãæäŸããããïŒïŒ
@container card-container (min-width: 300px) {
@when container(card-container) {
.card {
flex-direction: row;
align-items: center;
}
.card__image {
width: 100px;
height: 100px;
}
}
}
@container card-container (max-width: 299px) {
@when container(card-container) {
.card {
flex-direction: column;
align-items: flex-start;
}
.card__image {
width: 100%;
height: auto;
}
}
}
ãã®å Žåã`card-container`ã¯`@container`ã§å²ãåœãŠãããã³ã³ããåã§ããã`@when`å ã®`container(card-container)`ã¯æå®ãããã³ã³ããã³ã³ããã¹ããã¢ã¯ãã£ããã©ããããã§ãã¯ããŸããæ³šæïŒ`container()`颿°ãšæ£ç¢ºãªæ§æã®ãµããŒãã¯ãã©ãŠã¶ãããŒãžã§ã³ã«ãã£ãŠç°ãªãå ŽåããããŸããå®è£ ããåã«ãã©ãŠã¶ã®äºææ§ããŒãã«ãåç §ããŠãã ããã
å®çšçãªåœéçãªäŸ
- Eã³ããŒã¹ã®ååãªã¹ãïŒã«ããŽãªããŒãžã®ã°ãªããã§å©çšå¯èœãªã¹ããŒã¹ã«åºã¥ããŠãååãªã¹ããç°ãªãæ¹æ³ã§è¡šç€ºããŸããå°ããªã³ã³ããã§ã¯ååç»åãšäŸ¡æ Œã®ã¿ã衚瀺ãã倧ããªã³ã³ããã§ã¯ç°¡åãªèª¬æãšè©äŸ¡ãå«ããããšãã§ããŸããããã¯ãã€ã³ã¿ãŒãããé床ãããã€ã¹ã¿ã€ããç°ãªãããŸããŸãªå°åã§åœ¹ç«ã¡ããã€ãšã³ãã®ãã¹ã¯ããããšçºå±éäžåœã®äœåž¯åå¹ ã®ã¢ãã€ã«æ¥ç¶ã®äž¡æ¹ã§æé©åããããšã¯ã¹ããªãšã³ã¹ãå¯èœã«ããŸãã
- ãã¥ãŒã¹èšäºã®èŠçŽïŒãã¥ãŒã¹ãµã€ãã®ããŒã ããŒãžã«è¡šç€ºãããèšäºã®èŠçŽã®é·ãããã³ã³ããã®å¹ ã«åºã¥ããŠèª¿æŽããŸããçããµã€ãããŒã§ã¯ã¿ã€ãã«ãšæ°èªã®ã¿ã衚瀺ããã¡ã€ã³ã³ã³ãã³ããšãªã¢ã§ã¯ãã詳现ãªèŠçŽãæäŸããŸããäžéšã®èšèªïŒäŸïŒãã€ãèªïŒã§ã¯åèªããã¬ãŒãºãé·ããªãåŸåããããèŠçŽã«å¿ èŠãªã¹ããŒã¹ã«åœ±é¿ãäžããèšèªã®éããèæ ®ããŸãã
- ããã·ã¥ããŒããŠã£ãžã§ããïŒããã·ã¥ããŒããŠã£ãžã§ããã®ã¬ã€ã¢ãŠãããã³ã³ãããµã€ãºã«åºã¥ããŠå€æŽããŸããå°ããªãŠã£ãžã§ããã§ã¯ã·ã³ãã«ãªãã£ãŒãã衚瀺ãã倧ããªãŠã£ãžã§ããã§ã¯è©³çްãªçµ±èšãšã³ã³ãããŒã«ãå«ããããšãã§ããŸããããŒã¿èŠèŠåã«é¢ããæåçå奜ãèæ ®ããç¹å®ã®ãŠãŒã¶ãŒã®ããã€ã¹ãšç»é¢ãµã€ãºã«åãããŠããã·ã¥ããŒããšã¯ã¹ããªãšã³ã¹ã調æŽããŸããäŸãã°ãç¹å®ã®æåã§ã¯åã°ã©ããããæ£ã°ã©ãã奜ãå ŽåããããŸãã
@whenãã«ã¹ã¿ã ã¹ããŒããšå
±ã«äœ¿çšãã
ã«ã¹ã¿ã ã¹ããŒãã䜿çšãããšãèŠçŽ ã«ç¬èªã®ã¹ããŒããå®çŸ©ãããããã®ã¹ããŒãã«åºã¥ããŠã¹ã¿ã€ã«ã®å€æŽãããªã¬ãŒã§ããŸããããã¯ã:hoverã:activeã®ãããªåŸæ¥ã®CSSç䌌ã¯ã©ã¹ã§ã¯äžååãªè€éãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«äŸ¿å©ã§ããã«ã¹ã¿ã ã¹ããŒãã¯ãŸã ãã©ãŠã¶ã®å®è£
ã§é²åäžã§ããã@whenã«ãŒã«ã¯ããµããŒããæçãããšãã«ãããã®ã¹ããŒãã«åºã¥ããŠã¹ã¿ã€ã«ãå¶åŸ¡ããããã®ææãªææ®µãæäŸããŸãã
æŠå¿µçãªäŸïŒCSS倿°ã䜿çšããŠã¹ããŒããã·ãã¥ã¬ãŒãïŒ
ãã€ãã£ãã®ã«ã¹ã¿ã ã¹ããŒããµããŒãã¯ãŸã æ®éçã«å©çšã§ããªããããCSS倿°ãšJavaScriptã䜿çšããŠã·ãã¥ã¬ãŒãã§ããŸãã
/* CSS */
.my-element {
--is-active: 0;
background-color: #eee;
}
@when var(--is-active) = 1 {
.my-element {
background-color: #aaf;
}
}
/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});
ãã®äŸã§ã¯ãCSS倿°--is-activeã䜿çšããŠèŠçŽ ã®ç¶æ
ã远跡ããŸããJavaScriptã³ãŒãã¯ãèŠçŽ ãã¯ãªãã¯ããããšãã«ãã®å€æ°ã®å€ãåãæ¿ããŸãããã®åŸã@whenã«ãŒã«ã¯--is-activeã1ã«çãããšãã«ç°ãªãèæ¯è²ãé©çšããŸããããã¯åé¿çã§ãããç¶æ
ã«åºã¥ããæ¡ä»¶ä»ãã¹ã¿ã€ãªã³ã°ã®æŠå¿µã瀺ããŠããŸãã
çã®ã«ã¹ã¿ã ã¹ããŒãã§ã®å°æ¥ã®æœåšçãªäœ¿çšäŸ
çã®ã«ã¹ã¿ã ã¹ããŒããå®è£ ããããšãæ§æã¯æ¬¡ã®ããã«ãªããããããŸããïŒæ³šæïŒããã¯æšæž¬ã§ãããææ¡ã«åºã¥ããŠããŸãïŒïŒ
.my-element {
/* åæã¹ã¿ã€ã« */
}
@when :state(my-custom-state) {
.my-element {
/* ã«ã¹ã¿ã ã¹ããŒããã¢ã¯ãã£ããªãšãã®ã¹ã¿ã€ã« */
}
}
ãã®åŸãJavaScriptã䜿çšããŠã«ã¹ã¿ã ã¹ããŒããèšå®ããã³è§£é€ããŸãïŒ
element.states.add('my-custom-state'); // ã¹ããŒããã¢ã¯ãã£ãå
element.states.remove('my-custom-state'); // ã¹ããŒããéã¢ã¯ãã£ãå
ããã«ãããã¢ããªã±ãŒã·ã§ã³ããžãã¯ã«åºã¥ããŠéåžžã«ãã现ããã¹ã¿ã€ãªã³ã°å¶åŸ¡ãå¯èœã«ãªããŸãã
åœéåãšããŒã«ãªãŒãŒã·ã§ã³ã®èæ ®äºé
- å³ããå·Šãžèšè¿°ããèšèªïŒRTLïŒïŒã«ã¹ã¿ã ã¹ããŒãã䜿çšããŠãã¢ã©ãã¢èªãããã©ã€èªãªã©ã®RTLèšèªã®ã³ã³ããŒãã³ãã®ã¬ã€ã¢ãŠããšã¹ã¿ã€ãªã³ã°ãé©å¿ãããããšãã§ããŸããäŸãã°ãç¹å®ã®RTLã¹ããŒããã¢ã¯ãã£ããªãšãã«ããã²ãŒã·ã§ã³ã¡ãã¥ãŒã®ã¬ã€ã¢ãŠãããã©ãŒãªã³ã°ããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒã«ã¹ã¿ã ã¹ããŒãã䜿çšããŠããã©ãŒã«ã¹ãããèŠçŽ ã匷調衚瀺ãããããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ç¶æ ãããªã¬ãŒããããšãã«ä»£æ¿ããã¹ãã®èª¬æãæäŸããããããªã©ã匷åãããã¢ã¯ã»ã·ããªãã£æ©èœãæäŸããŸãããããã®ç¶æ å€åãæ¯æŽæè¡ã«å¹æçã«äŒéãããããã«ããŸãã
- æåçãªãã¶ã€ã³ã®å¥œã¿ïŒæåçãªãã¶ã€ã³ã®å¥œã¿ã«åºã¥ããŠã³ã³ããŒãã³ãã®èŠèŠçãªå€èгãé©å¿ãããŸããäŸãã°ããŠãŒã¶ãŒã®ãã±ãŒã«ãèšèªã«åºã¥ããŠç°ãªãã«ã©ãŒã¹ããŒã ãã¢ã€ã³ã³ã»ããã䜿çšããŸãã
CSS倿°ãšç¯å²ã¯ãšãªã®æäœ
@whenã«ãŒã«ã¯ãCSS倿°ãšå
±ã«äœ¿çšããŠãåçã§ã«ã¹ã¿ãã€ãºå¯èœãªã¹ã¿ã€ã«ãäœæããããšãã§ããŸããCSS倿°ã®å€ã«åºã¥ããŠã¹ã¿ã€ã«ãé©çšã§ããããããŠãŒã¶ãŒã¯ã³ãŒããäžåæžããã«ãŠã§ããµã€ãã®å€èгãã«ã¹ã¿ãã€ãºã§ããŸãã
äŸïŒããŒãã®åãæ¿ã
:root {
--theme-color: #fff;
--text-color: #000;
}
body {
background-color: var(--theme-color);
color: var(--text-color);
}
@when var(--theme-color) = #000 {
body {
--text-color: #fff;
}
}
ãã®äŸã§ã¯ã--theme-color倿°ãbodyã®èæ¯è²ãå¶åŸ¡ããŸããããã#000ã«èšå®ããããšã@whenã«ãŒã«ã¯--text-colorã#fffã«å€æŽããããŒã¯ããŒããäœæããŸãããŠãŒã¶ãŒã¯JavaScriptã䜿çšããŠ--theme-colorã®å€ã倿ŽãããããŠãŒã¶ãŒã¹ã¿ã€ã«ã·ãŒãã§ç°ãªãCSS倿°ãèšå®ãããã§ããŸãã
ç¯å²ã¯ãšãª
ç¯å²ã¯ãšãªã䜿çšãããšãå€ãç¹å®ã®ç¯å²å ã«ãããã©ããã確èªã§ããŸããããã¯ãããè€éãªæ¡ä»¶ä»ãã¹ã¿ã€ã«ãäœæããã®ã«åœ¹ç«ã¡ãŸãã
@when (400px <= width <= 800px) {
.element {
/* å¹
ã400pxãã800pxã®éã®å Žåã«é©çšãããã¹ã¿ã€ã« */
}
}
ãã ãã@whenå
ã§ã®ç¯å²ã¯ãšãªã®æ£ç¢ºãªæ§æãšãµããŒãã¯ç°ãªãå ŽåããããŸããææ°ã®ä»æ§ãšãã©ãŠã¶ã®äºææ§ããŒãã«ãåç
§ããããšããå§ãããŸããã³ã³ããã¯ãšãªã¯ãå€ãã®å Žåããµã€ãºããŒã¹ã®æ¡ä»¶ã«å¯ŸããŠããå
ç¢ã§ååã«ãµããŒããããä»£æ¿ææ®µãæäŸããŸãã
ã°ããŒãã«ãªã¢ã¯ã»ã·ããªãã£ãšãŠãŒã¶ãŒèšå®
- ãã€ã³ã³ãã©ã¹ãããŒãïŒCSS倿°ãš
@whenã«ãŒã«ã䜿çšããŠãèŠèŠé害ã®ãããŠãŒã¶ãŒã«å¯Ÿå¿ãããã€ã³ã³ãã©ã¹ãããŒããå®è£ ããŸãããŠãŒã¶ãŒãç¹å®ã®ããŒãºã«åãããŠã«ã©ãŒãã¬ãããšãã©ã³ããµã€ãºãã«ã¹ã¿ãã€ãºã§ããããã«ããŸãã - ã¢ãŒã·ã§ã³ã®åæžïŒãŠãŒã¶ãŒããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§ãã¢ãŒã·ã§ã³ã®åæžãèšå®ãæå¹ã«ããŠããå ŽåãCSS倿°ã䜿çšããŠã¢ãã¡ãŒã·ã§ã³ããã©ã³ãžã·ã§ã³ãç¡å¹ã«ããããšã§ããŠãŒã¶ãŒã®å¥œã¿ãå°éããŸãã
prefers-reduced-motionã¡ãã£ã¢ã¯ãšãªã¯ãããæ£ç¢ºãªå¶åŸ¡ã®ããã«@whenãšçµã¿åãããããšãã§ããŸãã - ãã©ã³ããµã€ãºã®èª¿æŽïŒãŠãŒã¶ãŒãCSS倿°ã䜿çšããŠãŠã§ããµã€ãã®ãã©ã³ããµã€ãºã調æŽã§ããããã«ããŸãã
@whenã«ãŒã«ã䜿çšããŠãããŸããŸãªãã©ã³ããµã€ãºã«å¯Ÿå¿ããããã«èŠçŽ ã®ã¬ã€ã¢ãŠããšééã調æŽãããã¹ãŠã®ãŠãŒã¶ãŒã®èªã¿ããããšäœ¿ããããã確ä¿ããŸãã
ãã¹ããã©ã¯ãã£ã¹ãšèæ ®äºé
- ãã©ãŠã¶ã®äºææ§ïŒ
@whenã«ãŒã«ã¯ãŸã æ¯èŒçæ°ããããã©ãŠã¶ã®ãµããŒãã¯ãŸã æ®éçã§ã¯ãããŸãããæ¬çªç°å¢ã§äœ¿çšããåã«ãå¿ ããã©ãŠã¶ã®äºææ§ããŒãã«ã確èªããŠãã ãããå€ããã©ãŠã¶ã«ã¯ããªãã£ã«ããã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ã®äœ¿çšãæ€èšããŠãã ããã2024幎åŸåã®æç¹ã§ã¯ããã©ãŠã¶ã®ãµããŒãã¯äŸç¶ãšããŠéå®çã§ããã@containerãšãJavaScriptãã©ãŒã«ããã¯ã䌎ãCSS倿°ã®è³¢æãªäœ¿çšã«äŸåããæ¹ããå€ãã®å Žåãããå®çšçãªã¢ãããŒãã§ãã - 詳现床ïŒ
@whenã«ãŒã«ã䜿çšãããšãã¯ãCSSã®è©³çŽ°åºŠã«æ³šæããŠãã ãããæ¡ä»¶ä»ãã¹ã¿ã€ã«ããç«¶åããã¹ã¿ã€ã«ãäžæžãããã®ã«ååãªè©³çŽ°åºŠãæã€ããšã確èªããŠãã ããã - ä¿å®æ§ïŒCSS倿°ãšã³ã¡ã³ãã䜿çšããŠãã³ãŒããããèªã¿ããããä¿å®ããããããŸããçè§£ãã«ããããããã°ãå°é£ãªé床ã«è€éãªæ¡ä»¶ä»ãã«ãŒã«ãäœæããããšã¯é¿ããŠãã ããã
- ããã©ãŒãã³ã¹ïŒ
@whenã«ãŒã«ã¯ãè§£æããå¿ èŠã®ããCSSã®éãæžããããšã§ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããããããè³¢æã«äœ¿çšããããšãéèŠã§ããæ¡ä»¶ä»ãã«ãŒã«ã®é床ã®äœ¿çšã¯ãç¹ã«å€ãããã€ã¹ã§ã¯ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãã - ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãã䜿çšããŠããã©ãŠã¶ã
@whenã«ãŒã«ããµããŒãããŠããªãå Žåã§ããŠã§ããµã€ããããŸãæ©èœããããã«ããŸãããã¹ãŠã®ãŠãŒã¶ãŒã«åºæ¬çã§æ©èœçãªãšã¯ã¹ããªãšã³ã¹ãæäŸãããã®æ©èœããµããŒããããã©ãŠã¶ã«å¯ŸããŠæ®µéçã«åŒ·åããŸãã
æ¡ä»¶ä»ãã¹ã¿ã€ãªã³ã°ã®æªæ¥
@whenã«ãŒã«ã¯ãCSSã«ããã倧ããªåé²ã衚ããŠããŸããããã«ããããã衚çŸåè±ãã§åçãªã¹ã¿ã€ãªã³ã°ãå¯èœã«ãªããããè€éã§ã¬ã¹ãã³ã·ããªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãžã®éãéãããŸãããã©ãŠã¶ã®ãµããŒããåäžãã仿§ãé²åããã«ã€ããŠã@whenã«ãŒã«ã¯ãŠã§ãéçºè
ã«ãšã£ãŠäžå¯æ¬ ãªããŒã«ã«ãªãå¯èœæ§ãé«ãã§ãã
CSS Houdiniã®ãããªã鲿©ãšã«ã¹ã¿ã ã¹ããŒãã®æšæºåã«ããã@whenã®æ©èœã¯ããã«åŒ·åãããã¹ã¿ã€ãªã³ã°ã«å¯Ÿããããã«ãã现ããå¶åŸ¡ãšJavaScriptãšã®ããã·ãŒã ã¬ã¹ãªçµ±åãå¯èœã«ãªããŸãã
çµè«
CSSã®@whenã«ãŒã«ã¯ãã³ã³ããã¯ãšãªãã«ã¹ã¿ã ã¹ããŒããCSS倿°ãããã³ãã®ä»ã®åºæºã«åºã¥ããŠæ¡ä»¶ä»ãã§ã¹ã¿ã€ã«ãé©çšããããã®åŒ·åã§æè»ãªæ¹æ³ãæäŸããŸãããã©ãŠã¶ã®ãµããŒãã¯ãŸã é²åäžã§ãããããŸããŸãªã³ã³ããã¹ãããŠãŒã¶ãŒã®å¥œã¿ã«é©å¿ããåçã§ã¬ã¹ãã³ã·ããªãŠã§ããã¶ã€ã³ãäœæããããã®ãããªãã®æŠåšåº«ã«æã€ã¹ã貎éãªããŒã«ã§ãã@whenã«ãŒã«ã®åºæ¬ãçè§£ãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ããã®æœåšèœåãæå€§éã«åŒãåºããçã«åªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæã§ããŸããäºææ§ãšæé©ãªããã©ãŒãã³ã¹ã確ä¿ããããã«ãããŸããŸãªãã©ãŠã¶ãããã€ã¹ã§åžžã«åŸ¹åºçã«ãã¹ãããããšãå¿ããªãã§ãã ããã
ãŠã§ããé²åãç¶ããäžã§ã@whenã®ãããªæ°ããCSSæ©èœãåãå
¥ããããšã¯ãæä»£ã®å
ãè¡ããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«æå
端ã®ãŠã§ããšã¯ã¹ããªãšã³ã¹ãæäŸããããã«äžå¯æ¬ ã§ãã