JavaScript 대신 CSS로 할 수 있는 5가지

작성자Juan Martin García✏️
저not the first one는 두 언어의 발전에 따라 CSS와 자바스크립트 간의 경계가 모호해졌다고 성명했습니다.
사용자 정의 속성 (변수) 부터 필터, 애니메이션, 수학 연산까지, CSS는 과거 자바스크립트 (또는 유행하는 CSS 프로세서) 에서 우리가 했던 많은 작업을 사용해서 로컬에서 사용할 수 있도록 했다.
두 언어 모두 다른 용도가 있다.브라우저 버전, 기능 버전, 속성이 증가함에 따라 CSS는 우리가 이전에 자바스크립트에 의존해서 실현한 기능을 처리하는 강력한 언어가 되고 있다.
이 글에서 우리는 당신이 들어보지 못했을 수도 있는 CSS 금괴를 이해할 것입니다. 금괴는 자연스러운 방식으로(우아한 방식으로!)부드러운 스크롤, 어두운 모드, 폼 검증 등 이전에 여러 줄의 JS 기교가 있어야만 일할 수 있는 기능을 처리한다.


부드럽게 스크롤
한때 우리는 자바스크립트 (심지어 jQuery) 에 의존해서 이 점을 실현해야만 했고, window.scrollY 는 이런 행위를 복제해야 했다.scroll-behavior 부동산 덕분에 그날들은 이미 지나갔다.우리는 지금 우리 사이트에서 부드럽게 굴러가는 것을 처리할 수 있습니다. 한 줄의 CSS 코드를 기다릴 수 있습니다.

html {
  scroll-behavior: smooth;
}

브라우저 지원은 around 75%이며 곧 Edge 76으로 넘어갑니다.다음 코드 펜에서 어떻게 작동하는지 확인하십시오.

암흑 모드
macOS released its dark mode functionality와Safari가 prefers-color-scheme 미디어 기능을 실현한 후에 어두운 모드가 최근의 핫이슈가 되었다. 이것은 사용자가 기본적으로 어두운 모드를 사용했는지 확인할 수 있도록 한다.
어두운 모드는 웹 사이트의 변경을 위해 필요한 클릭 이벤트를 연결하는 데 필요한 복잡한 기능이라고 생각할 수 있습니다.어느 정도 옳았지만 현재how I do it on my website는 이렇게 복잡할 필요가 없다.
Wei Gaoshowed us on her blog는 CSS가 지원하는 혼합 모델 중 하나reversed mode를 사용하여 비슷한 결과mix-blend-mode: difference를 실현하는 똑똑한 방법이다.만약 네가 일찍이 놀아 본 적이 있다면, 이것은 같은 물건이지만, 직접 브라우저에 있다.
반전된 색상을 지정할 필요가 없으며 블렌드 모드에서는 반전된 색상을 지정할 수 있으며 변경하지 않으려는 요소를 격리할 수 있습니다.그것의 일부 한계는 완전한 색 범위가 없으면 성능이 문제가 될 수 있다는 것이다.
현재Photoshop Blending Modes(91%는 전 세계), 76판은 테두리 지원을 제공하고 있다.
이런 혼합 모델의 작업 원리를 더욱 깊이 있게 설명하려면 확인native browser support is at 77% plus 13% with prefixes을 확보하십시오.흥미로운 실험을 수행하려면 이 코드 펜을 보십시오.
Wei’s awesome article
텍스트 자르기
이것은 제가 개인적으로 가장 좋아하는 사이트 중 하나입니다. 왜냐하면 이것은 제가 CMS에 의존하여 내용을 채우는 사이트를 개발할 때 겪는 흔한 문제이기 때문입니다.문안의 길이가 변할 경우 당신이 디자인한 귀여운 카드가 크기나 해상도에 따라 일치하지 않을 수도 있다.데이브 루퍼트 는 이 일에 대해 논평을 발표했다.
과거에 나는 자바스크립트 기반의 해결 방안을 생각하지 않고 접촉했다. 왜냐하면 has a great article.그러나 제가 블로그most CSS techniques for achieving this result were quite “hacky”를 쓰는 과정에서 몇 개의 CSS 속성을 발견했습니다. 이런 속성을 결합하면 로컬하고 실현하기 쉬운 해결 방안을 제공할 수 있습니다.만나다text-overflow와line-clamp!
my website
텍스트 오버플로우
이것은 광범위하게 사용되고 있는 순수한 본체 CSS 솔루션으로 텍스트가 요소를 포함할 때의 행동을 제어하는 데 사용된다.값을 ellipsis로 설정하면 유니코드… 문자가 제공됩니다.지금까지는 괜찮았지만, 텍스트의 길이에 상관없이 한 줄이 잘린 텍스트를 얻을 수 있다는 것이 주요 제한이었다.따라서 완벽한 제목이 어울릴 수도 있지만 그렇게 유용한 발췌문, 평론문이나 긴 문장은 아니다.다음 예제를 참조하십시오.
이곳이 line-clamp이 작용하는 곳이다.
fully supported
클립line-clamp 부동산도 새 것이 아니다.이런 기술 (따라서 사용display: -webkit-box과-webkit-box-orient: vertical로 낡은 flexbox를 실현해야 한다)을 보여주었다.
그럼 여기는 무슨 새로운 일이 있습니까?Firefoxroughly a decade ago 등등... 접두사는 -webkit입니다!현재 Edge는 크롬을 기반으로 하고 있으며, 우리도 -webkit 접두사를 사용하여 implemented it on version 68 향상시킬 수 있다.
이것은 우리가 현재 세 줄 CSS의 조합을 사용하여 여러 줄 텍스트 browser support up to 92% 를 절단할 수 있다는 것을 의미한다.여기서 유일한 문제는 클립 규범은 like so규범의 일부분이다. 이 규범은 현재 편집자의 초고에 있다. 이것은 규범에 약간의 변화가 있을 수 있다는 것을 의미할 수 있다. 또 다른 고려해야 할 문제는 표시할 문자 수를 조절할 수 없다는 것이다. 이것은 일부 결과를 초래할 수 있지만 이외에 즐거운 CSS 클립!
CSS Overflow Module Level 3
스크롤 스냅
CSS 스크롤 캡처는 크롬 사용자가 한동안 가지고 있던 또 다른 편리한 기능으로 Firefox에서 최신 발표 기능을 누릴 수 있습니다.Edge의 76판 Bumping up 에서도 사용할 수 있습니다.
일부 특이한 사이트가 전체 화면 부분을 만들고 스크롤할 때 뷰포트를 특정 위치에 잠그는 것을 알아차렸습니까?다음은 이런 행위의overall browser support to all major browsers.
얼마 전까지만 해도 정상적으로 작동하기 어려웠는데, 대량의 수학 계산과 자바스크립트가 필요했다.그러나 현재 CSS는 로컬에서 유사한 an example 상호작용을 만들 수 있습니다.
이것은 Flexbox나 CSS 격자와 유사합니다. 용기 요소가 필요하기 때문에 scroll-snap-type 와 여러 개의 하위 요소 scroll-snap-align 를 설정합니다. 예를 들어:
HTML:

<main class=”parent”>
  <section class=”child”></section>
  <section class=”child”></section>
  <section class=”child”></section>
</main>

CSS:

.parent {
  scroll-snap-type: x mandatory;
}

.child {
  scroll-snap-align: start;
}

scroll-snap-type는 두 가지 다른 값을 받아들인다. mandatory는 원소의 윗부분이나 밑부분, 또는 proximity에 강제로 포착된다. 내용이 포착점에 충분하면 계산하고 포착할 것이다.
부모 용기에 설정할 수 있는 또 다른 속성은 scroll-padding입니다. 만약에 레이아웃에 고정된 요소(예를 들어 고정된 제목, 또는 왜 없는지, 쿠키 정책 알림this one가 있으면 이 속성은 편리할 수 있습니다.
아이들에게 우리는 지금 scroll-snap-align 밖에 없다. 그것은 용기에 어느 점 (꼭대기, 중심, 바닥) 을 포착해야 하는지 알려줄 것이다.
Robin Rendle는 전체 사이트에 스크롤 캡처를 마음대로 추가하는 것이 유혹적이라고 생각할 수 있지만, 지금은 이런 기술이 몇 줄의 CSS 코드만 있으면 이 효과를 얻을 수 있고 수학 계산이 필요 없다는 것을 알고 있다. 기억해라. 😅 스크롤 바를 흐트러뜨리지 마라.이런 기술은 슬라이더, 이미지 라이브러리, 또는 페이지의 특정한 부분에 유용할 수 있지만, 성능과 사용자의 전체적인 체험에 영향을 줄 수 있기 때문에 조심스럽게 사용해야 한다.
one and only law of web design
점성 항법
이전에 대량의 자바스크립트 수학 연산이 필요하고 성능 면에서 상당히 비싼 기능을 실현한 후에 우리는 점성 포지셔닝을 가지게 되었다.우리가 전에 offsetTop와 window.scrollY가 필요했던 곳, 우리는 지금 position: sticky 우리를 위해 모든 마법을 할 수 있습니다!접착성 위치가 있는 요소는 뷰포트의 지정된 점에 도달할 때까지 상대적 위치의 요소로 고정된 위치의 요소가 됩니다. .
따라서 다음과 같은 일을 하는 것처럼 들리지만

header {
  position: sticky;
  top: 0;
}

제목을 끈적임으로 잘 설정하려면 HTML의 구조가 중요하다는 것을 알아야 한다!예를 들어, HTML 구조가 다음과 같은 경우

<main>
  <header>
    <h1>This is my sticky header!</h1>
  </header>
  <section>This is my content</section>
</main>

수확대는 부모 태그 (이 예에서 -webkit 로 덮어쓴 영역에만 붙일 수 있습니다.이'점성부항'은'점성항'이 작용할 수 있는 범위를 결정한다.Elad Shechter는 Browser support is up to 92% with the <main> prefix와 this article에서 이 기술을 사용했다는 점에서 더 좋은 해석을 얻었다.
here’s a fun little experiment
요약 보상:@미디어 규칙 지원
위에서 말한 바와 같이 이러한 CSS 기능은 광범위하게 사용되고 지원되지만, 그것들을 추가하기 전에, 그것들이 존재하는지 확인해야 할 수도 있습니다. 이 경우 @supports 기능으로 are available on the browser을 조회할 수 있으며, 스타일을 적용하기 전에 브라우저가 특정한 property: value 쌍을 지원하는지 테스트할 수 있습니다.구문은 다음과 같습니다.

@supports (initial-letter: 4) {
  p::first-letter {
    initial-letter: 4;
  }
}

이 편리한 기능 조회가 있으면 지원하는 브라우저에 스타일을 적용할 수 있습니다.이런 문법은 우리가 미디어 조회를 작성하는 방식이기 때문에 이른바 점진적인 강화를 실현할 수 있다. 이런 최고급 기능이 있는 브라우저에서 이러한 기능을 즉시 사용하고 이런 기능이 없는 브라우저에서 일치하지 않는 행위를 방지할 수 있다.제인 심먼스는 자신의 widely adopted by browsers 영상에서 이 점을 더 잘 설명했다.
이렇게!이러한 최첨단 CSS 기능을 통해 더욱 작은 JavaScript 패키지를 출시하고 재미있고 눈에 띄는 UI를 만들 수 있기를 바랍니다.이 밖에 수시로 이것들을 볼 수 있다Resilient CSS.
편집자: 이 문장에 문제가 있는 것을 보았습니까?정확한 버전Codepens을 찾을 수 있습니다.
here
플러그: , 네트워크 응용용 DVR
 
LogRocket
 
는 프런트엔드 로그 기록 도구로 문제를 자신의 브라우저에서 발생하는 것처럼 다시 재생할 수 있습니다.LogRocket은 오류의 원인을 추측하거나 화면 캡처와 로그 저장을 묻는 대신 세션을 재방송하여 오류의 원인을 신속하게 파악할 수 있습니다.프레임워크가 어떻든지 간에, 모든 프로그램과 완벽하게 사용할 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 다른 상하문에서 기록됩니다.
 
Redux 작업과 상태를 기록하는 것 외에 LogRocket에는 콘솔 로그, JavaScript 오류, 스택 추적, 제목과 본문이 있는 네트워크 요청/응답, 브라우저 메타데이터 및 사용자 정의 로그가 기록되어 있습니다.또한 DOM은 페이지의 HTML과 CSS를 기록하여 가장 복잡한 한 페이지 프로그램의 픽셀급 완벽한 영상을 재현합니다.
 
LogRocket .
게시물Try it for free이 가장 먼저5 things you can do with CSS instead of JavaScript에 올라왔다.