웹 기술에 대해 말하자면, JavaScript는 매우 특수한 위치에 있다.그것은 다른 곳에서 찾을 수 없는 기능을 제공하거나 다른 웹 언어인 HTML과 CSS를 쉽게 대체할 수 있다.
대부분의 JS 개발자들은 DOM API와 이를 바탕으로 구축된 모든 UI 라이브러리와 프레임워크를 알고 있지만'CSS API'에 대한 이해(기술적으로는 그렇게 부르지 않지만 당신은 이 점을 알고 있다)는 것은 흔치 않다.
JS에서 CSS 스타일시트를 직접 작성할 수 있는 API를 my previous article에 소개했습니다.반대로 오늘은 좀 더 고급스러운 것들을 소개하고 싶어요. JS에서 @media CSS 규칙을 어떻게 제어하는지. 맞혔어요!

CSS API 요약

우리는 이전 문장을 빨리 되돌아보는 것부터 시작합시다.
두 가지 방법으로 스타일시트에 액세스할 수 있습니다 - DOM 요소의 sheet 속성을 표시하거나<style> 인덱스 컬렉션 중 하나로 표시합니다.이 두 가지 상황에서 결과는 모두 document.styleSheets 인터페이스를 실현하는 대상이다. 이 인터페이스는 CSSStyleSheet와insertRule() 등 제어 방법과 removeRule() 등 속성에 더 접근할 수 있도록 한다.

const style = document.createElement("style");
document.head.appendChild(style);

const styleSheet = style.sheet;
const ruleIndex = styleSheet.insertRule(".example { background-color: red }");
const rule = styleSheet.cssRules[ruleIndex];

cssRules 메서드는 새 CSS 규칙을 삽입하는 인덱스를 반환합니다.그리고 그것을 사용하여 insertRule() 인터페이스를 실현하는 규칙 대상에 접근할 수 있다.예상한 바와 같이, 이러한 대상은 자신의 일부 속성을 가지고 있다. 주로 규칙을 설정하고 접근하는 데 사용되는 데이터이다.

CSSRule 회사

지금 우리는 좀 천천히 해야 한다.이것은 CSSRule 및 파생 버전을 잘 이해해야만 더욱 복잡한 JS 기반 스타일시트를 만들 수 있기 때문이다.
그 자체로 말하자면, 비록 너는 영원히 이렇게 보지 않을 것이다. CSSRule 단지 몇 가지 속성만 있을 뿐이다.가장 중요한 것은 CSSRule - 규칙을 저장하는 텍스트 CSS 표현 및 cssText - 주어진 유형을 나타내는 상수 값 type 입니다.

// ...
rule.cssText; // ".example { background-color: red; }"

다양한 유형이 있기 때문에 CSSRule 인터페이스의 도수.가장 흔히 볼 수 있는 CSSRule 중 하나는 위에서 보신 것과 유사한 규칙을 제정하는 것입니다.표준 CSSStyleRule 속성 외에도 CSSRule - 규칙 CSS 선택기의 텍스트 표시와 selectorText - 익숙한 DOM 요소의 내연 스타일과 같은 더 재미있는 속성이 있습니다.

// ...
rule.selectorText; // ".example"
rule.style.backgroundColor; // "red"
rule.style.backgroundColor = "green";
rule.style.backgroundColor; // "green"

좋은 보상으로 - 규칙을 변경할 수 있는 style, 실시간으로 변경할 수 있는 모든 요소를 변경할 수 있는 거 알아요!?

CSSMediaRule 회사

하지만 모든 다른 CSSStyleDeclaration 은 당신이 이곳에 온 목적이 아닙니다. - 아니요. CSSstyle 규칙을 위해 이곳에 왔습니다.그리고 예상대로 자바스크립트 방면에서도 반사가 있다. 이번에는 CSSRule 형식이다.@media 이렇게 흥미로운 것은 더욱 깊은 계승성을 가지고 있기 때문이다.간단CSSMediaRule과는 달리 CSSMediaRule의 직접 자대이며, CSSStyleRule 그 외에 CSSRule 과 CSSMediaRule (주정된 순서대로)가 그 부대이다.
이것은 이 규칙을 충분히 설명한다.CSSGroupingRule 는 중첩 규칙이 포함된 규칙을 나타내고, CSSConditionRule 은 특정 조건이 충족될 때만 이 규칙을 적용한다는 것을 나타낸다.CSSGroupingRule 규칙의 CSS 구문을 기억하십니까?

@media screen and (min-width: 900px) {
  .example {
    background-color: blue;
  }
}

현재 이 두 개 CSSConditionRule 부모 대상은 모두 그에게 중요한 속성과 방법을 추가했다.@media 위에서 아래로(CSSMediaRule 자체의 바로 아래에서)CSSRule와CSSGroupingRule 등 방법과 insertRule() 속성을 참여자에게 추가한다.익숙하게 들리시나요?이것은 이러한 기능이 우리가 이전에 본 것과 유사하기 때문에 모두 deleteRule() 인터페이스에서 시작되었기 때문이다.

// ...
const mediaRuleText = `@media screen and (min-width: 900px) {
  .example {
    background-color: blue;
  }
}`;
const mediaRuleIndex = styleSheet.insertRule(ruleText);
const mediaRule = styleSheet.cssRules[mediaRuleIndex];

mediaRule.cssRules[0].selectorText; // ".example"
mediaRule.cssRules[0].style.backgroundColor; // "blue"

우리의 예에서 단지 하나의 규칙이 cssRules 그룹으로 나뉘어져 있다. 간단한 CSSStyleSheet 규칙은 우리가 이미 완전한 순환을 걷고 있다는 것을 의미한다.
이어서 우리는 CSSGroupingRule, 그것은 CSSStyleRule 속성을 가져왔다.이 녀석은 우리가 CSS 조건의 텍스트 표시에 접근할 수 있도록 허락한다.우리의 사례에서:

mediaRule.conditionText; // "screen and (min-width: 900px)"

CSSConditionRule는 자신의 속성-conditionText-를 추가했다. 이것은 CSSMediaRule 인터페이스를 실현하는 대상에 해당한다.기본적으로 media 의 고급 버전입니다.이것은 어떤 일에도 중요하지 않기 때문에 관심이 있다면 MDN 문서를 보십시오.

거꾸로 말하다

MediaList 관련 API는 여기까지입니다.conditionText 유사한 변체가 많아 함께 사용하면 인상적인 결과를 얻을 수 있다.나 자신Prototope과 같은 JS 라이브러리의 동적, 관리 가능한 CSS와 복잡한 실시간 업데이트는 절대적으로 가능하다.
하지만 이 일들이 CSS에 있어서 가장 좋은 처리 방식이라고 말할 수도 있다.네가 틀림없이 옳다. 이것이 바로 CSS의 설계 목적이다.하지만 그렇다면 다른 것에 흥미를 느끼게 될지도 몰라요?
만약 내가 너에게 JS에서 미디어 조회를 평가할 수 있는 방법을 알려준다면 어떻게 되겠니?창문의 너비나 높이가 요구에 도달했는지 알아보시겠습니까?물론 이것은 가능하다. 이것은 모두 CSSMediaRule 덕분이다.

matchMedia

따라서 CSSRule 은 matchMedia() 대상에 직접 접근할 수 있는 방법으로 주어진 미디어 조회를 분석하고 활동의 변경에 반응할 수 있습니다.

const mediaQuery = matchMedia("screen and (min-width: 900px)");

matchMedia() 이른바 window 대상을 되돌려준다.이 녀석은 언론 조회를 처리할 때 네가 원하는 모든 것을 제공했다.미디어 조회가 현재 사이트의 상태와 일치하는지 확인하기 위해 가장 중요한 matchMedia() 속성이 있습니다. MediaQueryList 속성으로 제공된 미디어 조회 문자열을 가져오고, 두 가지 matches 방법과 media 방법으로 미디어 조회 상태의 변경을 탐지합니다.

mediaQuery.addListener(() => {
    mediaQuery.matches; // true or false
});
mediaQuery.media; // "screen and (min-width: 900px)"

현재 이 기능의 유용성에 대해 이의를 제기할 수 없습니다.JS 구동 UI 유형을 처리할 때 특정 미디어 조회가 적용되는지 확인하는 것이 도움이 됩니다. Masonry Grid를 예로 들어보세요.addListener() 방법은 다른 유사한 해결 방안(특히 상수removeListener(), 심지어 모니터링이 있는 해결 방안)보다 훨씬 빠르다.내가 이미 말했듯이, 그것은 매우 좋은 크로스 브라우저 지원을 가지고 있으며, 위쪽(또는 아래쪽)에서 IE 10까지 지원합니다!

결론

CSS API와 matchMedia()를 통해 JavaScript 기능의 인상적인 면을 보여 드렸다고 생각합니다.나는 네가 이미 새로운 것을 배웠으면 좋겠다. 이제 다양한 JS의 기적을 창조할 수 있을 것이다. - 간단한 JS가 구동하는 UI 레이아웃부터 JS 라이브러리의 전면적인 CSS까지.
더 많은 웹 개발 안내서와 강좌에 관해서는 저를 계속 지켜봐 주십시오. Facebook 또는 Dev.to를 눌러 주십시오.나도 하나 있다. (최근에 활발하지는 않지만, 나는 노력하고 있다.) 너는 아마 보고 구독하고 싶을 것이다.이 글을 읽어 주셔서 감사합니다. 인코딩이 즐겁길 바랍니다.