CSS로 할 수 있는 줄 몰랐던 7가지

믿거나 말거나 CSS가 더 많은 기능을 추가하는 것처럼 CSS와 JavaScript도 겹치기 시작했습니다. 내가 "CSS와 JavaScript가 서로에게 영향을 미치는 5가지 방법(당신이 알지 못할 수도 있음)"을 썼을 때 사람들은 JavaScript와 CSS가 얼마나 중복되는지에 놀랐습니다. 오늘은 JavaScript나 이미지 없이 CSS로 할 수 있는 7가지 작업을 강조하겠습니다.

CSS@supports

모든 훌륭한 프런트엔드 개발자는 일부 브라우저에서 사용할 수 없는 기능을 사용할 때 기능 테스트를 수행해야 합니다. 기능 테스트는 항상 JavaScript로 수행되어 왔으며 많은 사람들이 잘 테스트된 많은 사례로 구성된 탁월한 유틸리티인 Modernizr을 사용하여 기능 테스트를 수행합니다. 새로운 API: @supports가 개발자들 앞에 나타났습니다. [email protected] 작동 방식에 대한 간단한 예:

/* basic usage */
@supports(prop:value) {
/* more styles */
}
/* real usage */
@supports (display: flex) {
div { display: flex; }
}
/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    section {
      display: -webkit-flex;
      display: -moz-flex;
    display: flex;
    float: none;
    }
}

이 새로운 @supports 기능에도 해당 JavaScript 버전이 있지만 만료되었습니다. 곧 사용하길 기대하겠습니다!

CSS 필터

이미지의 색조를 변경하는 서비스를 작성하면 수십억 달러에 Facebook에 판매할 수 있습니다. 물론, 당연한 일이지만 이미지 필터를 작성하는 것은 과학이 아닙니다. Mozilla에서 첫 주에 작성한 작은 프로그램(상을 받았습니다. 어, 그냥 말하는 것뿐입니다)은 캔버스를 사용하여 이미지 필터를 생성하기 위해 JS 기반 수학을 사용했지만 이제는 CSS 필터링을 사용하여 이미지를 생성할 수 있습니다.

/* simple filter */
.myElement {
-webkit-filter: blur(2px);
}
/* advanced filter */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

이 유형의 필터는 이미지의 원래 모습을 변경하는 역할만 합니다. 해당 필터는 이미지를 저장하거나 내보낼 때 사용되지 않지만, 사진을 아름답게 하거나 포스터를 처리해야 할 때 사용됩니다. 매우 유용합니다.

포인터 이벤트 및 브리킹 클릭

CSS 포인터 이벤트 속성은 JavaScript를 통해 요소를 효과적으로 비활성화하는 방법을 제공합니다.

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});

위의 예에서는 CSS 포인터 이벤트 값으로 인해 클릭 이벤트가 실행되지 않습니다. 나는 이것이 큰 이점이라는 것을 알았습니다. 일부 요소가 비활성화되었는지 확인하기 위해 모든 곳에서 className이나 속성을 확인할 필요가 없습니다.

메뉴 축소 및 확장

CSS를 사용하면 전환 효과와 애니메이션을 만들 수 있지만, 일부 항목을 수정하고 애니메이션을 제어하려면 JavaScript 라이브러리가 필요한 경우가 많습니다. 매우 인기 있는 애니메이션은 접기 및 확장 메뉴 효과입니다. CSS만 사용하면 이 효과를 얻을 수 있다는 사실을 많은 사람들이 모릅니다.

/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}

Max-height를 영리하게 사용하면 원하는 효과에 따라 요소를 축소하거나 확장할 수 있습니다.

CSS 카운터

인터넷에서 '카운터'라는 용어를 들으면 웃음이 나올 때가 많지만 CSS 카운터는 우리를 더욱 웃게 만듭니다. CSS 카운터를 사용하면 개발자는 :before 및 :after:

/* initialize the counter */
ol.slides {
counter-reset: slideNum;
}
/* increment the counter */
ol.slides > li {
counter-increment: slideNum;
}
/* display the counter value */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}

를 사용하여 지정된 요소에서 카운터를 증가시킬 수 있습니다. 슬라이드쇼 효과에 사용되는 CSS 카운터 및 양식 콘텐츠 상위와 같은 목록을 자주 볼 수 있습니다.

유니코드 CSS 스타일 이름

많은 CSS 모범 사례 문서가 있으며 모두 CSS 스타일 이름을 지정하는 방법부터 시작합니다. 유니코드 기호

.

ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}
.❤ {
background: lightgreen;
border: 1px solid green;
}

를 사용하여 스타일 이름을 지정하라는 문서는 절대 볼 수 없습니다. 이러한 기호는 사용하지 마세요. 당신이 할 수 없다면!

CSS 서클

CSS 트라이앵글은 기술 활동이며 CSS 서클도 마찬가지입니다. CSS border-radius를 남용하면 완벽한 원을 만들 수 있습니다!

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they're equal */
}

서클에 그라디언트를 추가할 수 있고 CSS 애니메이션을 사용하여 서클을 움직일 수도 있습니다! CSS는 이러한 모양에 대해 더욱 통합된 API를 갖게 될 예정이지만 지금은 이 방법으로 원을 만들 수 있습니다.