CSS가 할 수 있는 놀라운 예를 공유하세요_경험 교환

제가 "당신이 모를 수도 있는 JavaScript와 CSS의 상호작용 5가지 방법"이라는 기사를 썼을 때 사람들은 JavaScript와 CSS가 얼마나 겹치는지 보고 놀랐습니다. 오늘은 JavaScript나 이미지 없이 CSS로 할 수 있는 7가지 작업을 강조하겠습니다.

CSS@지원

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

코드 복사 코드는 다음과 같습니다.

/* 기본 사용법 */
@supports( prop:value) {
/* 추가 스타일 */
}

/* 실제 사용법 */
@supports (display: flex) {
div { display: flex }
}

/* 접두사도 테스트 */
@supports (display: -webkit-flex) 또는
(display: -moz-flex) 또는
(display: flex) {

섹션 {
디스플레이: -webkit-flex;
디스플레이: -moz-flex;
디스플레이: flex;
float: 없음;
}
}

이 새로운 @supports 기능에도 해당 JavaScript 버전이 있지만 곧 만료되기를 기대하고 있습니다.

CSS 필터

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

코드 복사 코드는 다음과 같습니다.

/* 단순 필터 */
.myElement {
-webkit-filter: 흐림(2px);
}

/* 고급 필터 */
.myElement {
-webkit-filter: 흐림(2px) 회색조(.5) 불투명도(0.8) 색조 회전(120deg);
}

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

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

CSS 포인터 이벤트 속성은 요소를 효과적으로 비활성화하는 방법을 제공합니다. 따라서 JavaScript를 통해 링크를 클릭해도 클릭 이벤트가 발생하지 않습니다.

코드 복사 코드는 다음과 같습니다.

/* 클릭하거나 활성화할 때 아무것도 하지 않음 * /
.disabled { 포인터 이벤트: 없음; }/* 포인터 이벤트 때문에 발생하지 _않습니다_ 애플리케이션 */

document.getElementById("disabled-element").addEventListener("click", function(e) {
Alert("Clicked!");
});

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

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

코드 복사 코드는 다음과 같습니다.

/* 열린 상태의 슬라이더 */
.slider {
Overflow-y: Hidden;
max-height: 500px /* 대략적인 최대 높이 */

전환 속성: 모두;
전환 기간: .5s;
전환 타이밍 함수: 입방 베지어(0, 1, 0.5, 1);
}

/* "closed" 클래스로 닫습니다 */
.slider.closed {
max-height: 0;
}

Penggunaan bijak Max-height boleh membenarkan elemen runtuh dan mengembang mengikut kesan yang diingini.

　Kaunter CSS

Istilah "kaunter" sering membuat kita ketawa melihat maksudnya di web, tetapi kaunter CSS ialah perkara lain yang membuatkan kita lebih ketawa. Pembilang CSS membenarkan pembangun menambah pembilang pada elemen tertentu menggunakan :before dan :after:

Salin kod Kod adalah seperti berikut:

/* mulakan kaunter */
ol. slaid {
set semula balas: slideNum;
}

/* naikkan pembilang */
ol.slides > li {
counter-increment: slideNum;
}

/* paparkan nilai pembilang */
ol.slides li:selepas {
kandungan: "[" counter(slideNum) "]";
}

Anda sering melihat pembilang CSS digunakan dalam kesan tayangan slaid dan senarai seperti kandungan borang.

　Nama gaya CSS Unikod

Terdapat banyak dokumen amalan terbaik CSS, dan semuanya bermula dengan cara menamakan gaya CSS. Anda tidak akan pernah melihat dokumen yang mengatakan untuk menamakan gaya anda dengan simbol unikod:

Salin kod Kod adalah seperti berikut:

.ಠ_ಠ {
sempadan: 1px pepejal #f00 ;
latar belakang: merah jambu;
}

.❤ {
latar belakang: hijau muda;
sempadan: 1px hijau pepejal;
}

Sila jangan gunakan simbol ini. Kecuali anda boleh!

　Kalangan CSS

Segitiga CSS ialah tugas teknikal, dan perkara yang sama berlaku untuk kalangan CSS. Dengan menyalahgunakan jejari sempadan CSS, anda boleh mencipta kalangan yang sempurna!

Salin kod Kod adalah seperti berikut:

bulatan {
jejari sempadan: 50%;
lebar: 200px;
tinggi: 200px;
/* lebar dan tinggi boleh jadi apa sahaja, asalkan sama */
}

Anda boleh menambah kecerunan pada kalangan anda dan anda juga boleh menggunakan animasi CSS untuk menggerakkan kalangan anda! CSS akan mempunyai lebih banyak API bersatu untuk bentuk ini, tetapi buat masa ini anda boleh membuat kalangan dengan cara ini.

Itu dia, 7 perkara yang boleh anda lakukan dengan CSS yang akan mengejutkan anda, sebahagian daripadanya sangat berguna dan sebahagian daripadanya anda tidak perlukan di tempat kerja. Sila beritahu saya jika saya kehilangan beberapa kaedah CSS yang hebat di tempat kerja yang anda kerap gunakan.