12 개의 알려진 CSS 사실 (속편)

이 기사는 12 개의 덜 알려진 CSS 사실을 공개하며 초보자와 숙련 된 개발자 모두에게 적합합니다. 일부는 친숙 할 수 있지만 다른 일부는 CSS 기능에 대한 놀라운 통찰력을 제공합니다.

Sitepoint/Natalia Balska에 의한 아트 워크 키 하이라이트 :

슬래시 구문 :

슬래시를 사용하여 비대칭 둥근 모서리를 만듭니다. 수평 및 수직 반경을 개별적으로 정의합니다. 상대 키워드 :

및

사용을 사용하여 유전 화 값에 비해 글꼴 중량을 동적으로 조정하십시오.
• 속성 : 레이아웃이없는 시각적으로 오프셋 윤곽선 (IE 지원). 속성 : border-radius 셀 함량과 무관 한 레이아웃으로 테이블 렌더링 속도를 최적화하십시오.
• 동작 : 테이블 셀과 다른 요소에 대한 뚜렷한 행동을 이해합니다. font-weight> bolder Pseudo Element : lighter 블록 수준 요소에 대한 고급 인쇄 효과에 대한 기능을 활용합니다.
세부 사항을 탐구합시다 :
• outline-offset 슬래시 구문 : 속성은 별도의 수평 및 수직 반경을 지정하기 위해 슬래시를 수용하여 비대칭 둥근 모서리를 가능하게합니다. 시각적 이해를 위해 MDN 대화식 데모를 참조하십시오.
• 상대 키워드 : table-layout 및 키워드는 상속 된 값에 비해 글꼴 무게를 조정하여 특히 여러 가중치가있는 글꼴이 더 역동적 인 인쇄 제어를 제공합니다. fixed.
• 속성 : vertical-align이 속성은 요소에서 개요를 상쇄하여 레이아웃에 영향을 미치지 않으면 서 시각적 호소력을 향상시킵니다. 인터넷 익스플로러 지원의 부족에 주목하십시오
• 속성 : 사용 ::first-letter 사용 셀 함량과 독립적으로 레이아웃을 만들어 테이블 렌더링 속도를 크게 높이십시오.
테이블의

:

다른 요소에 대한 동작과 달리 테이블 셀 내에서 내용 정렬에 영향을 미칩니다.

pseudo element : 이 의사 요소는 주요 브라우저에서 블록 레벨 요소의 첫 번째 글자를 일관되게 스타일링하여 정교한 타이포그래피 효과를 가능하게합니다. ::first-letter.

클래스 구분기로서의 잘못된 문자 :

기술적으로 유효하지 않은 반면, 특정 문자 (예 : "/")는 HTML 클래스 목록에서 가독성 향상을 위해 구분자로 사용할 수 있습니다. 그러나 CSS에서 클래스 이름으로 직접 사용할 수 없습니다.

분수 애니메이션 반복 : 속성은 분수 값을 받아 들여 애니메이션이 중간에 중간을 중지 할 수 있도록합니다. 참고 브라우저 호환성 변형이 존재할 수 있습니다

애니메이션 속기 충돌 :

애니메이션 속기 키워드와 충돌하는 애니메이션 이름을 사용하지 않으면 (예 : ,

).

요소 선택 : chain 선택기를 효율적으로 선택하여 범위의 요소를 선택합니다. 브라우저 호환성을 고려해야합니다 animation-iteration-count

무효 요소의 유사 요소 :

모든 공허 요소에 적용 할 수는 없지만 . 와 같은 일부에 의사 요소가 적용될 수 있습니다.

사례에 민감한 속성 값 : 속성 선택기는 일부 속성에 대해서는 대소 문자를 사용하지만 다른 속성 (). 이 기능을 자주 사용하는 CSS 기능을 확장하면 개발자가보다 효율적이고 표현적인 코드를 작성할 수 있습니다. 의견에서 가장 좋아하는 모호한 CSS 트릭을 알려주십시오! reverse CSS에 대한 자주 묻는 질문 (FAQ) : (이 섹션은 주요 주제와 관련이없고 응답 길이를 크게 확장하기 때문에 간결하게 생략됩니다. 필요한 경우 별도로 추가 할 수 있습니다.) alternate.

위 내용은 12 개의 알려진 CSS 사실 (속편)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!