정보실

웹학교

정보실

css 웹사이트 CSS 사용 통계

본문

소개 


CSS (Cascading Style Sheets)는 웹 페이지를 페인트, 서식 및 레이아웃 하는 데 사용됩니다. 이 기능은 텍스트 색상에서 3D 투시까지 간단한 개념으로 확장됩니다. 

또한 개발자가 다양한 화면 크기, 컨텍스트보기 및 인쇄를 처리 할 수 있는 기능을 제공합니다. 

CSS는 개발자가 컨텐츠를 작성하고 사용자에게 올바르게 적응할 수 있도록 도와줍니다.


https://almanac.httparchive.org/en/2019/css 


웹 기술에 익숙하지 않은 사람들에게 CSS를 설명 할 때 CSS를 집의 벽을 페인트 하는 언어로 생각하면 도움이 될 수 있습니다. 

창문과 문의 크기와 위치는 물론 벽지나 식물과 같은 번영하는 장식물을 묘사합니다. 

그 이야기의 재미있는 비결은 집을 걷는 사용자에 따라 개발자가 집을 특정 사용자의 선호 사항이나 상황에 맞게 조정할 수 있다는 것입니다!


이 장에서는 웹에서 CSS를 사용하는 방법에 대한 데이터를 검사, 집계 및 추출합니다. 우리의 목표는 어떤 기능이 사용되는지, 어떻게 사용되는지, CSS가 어떻게 성장하고 채택되는지를 전체적으로 이해하는 것입니다.


매혹적인 데이터를 파고들 준비가 되셨습니까?! 다음 숫자 중 다수는 작을 수 있지만 중요하지 않은 것으로 오인하지 마십시오! 새로운 것들이 웹을 포화시키는 데 몇 년이 걸릴 수 있습니다.


Color 


색상은 웹에서 테마 및 스타일링에 없어서는 안될 부분입니다. 웹 사이트에서 색상을 사용하는 방법을 살펴 보겠습니다.


색상 유형 


16 진수는 93% 사용, RGB, HSL 순으로 색상을 설명하는 가장 보편적 인 방법입니다. 흥미롭게도 개발자는 이러한 색상 유형에 대해 알파-투명도 인수를 최대한 활용하고 있습니다. 

HSLA 및 RGBA는 HSL 및 RGB보다 훨씬 많이 사용되며 거의 두 배의 사용량이 있습니다! 알파 투명도는 나중에 웹 사양에 추가되었지만 HSLA 및 RGBA는 IE9까지 지원되므로 계속 사용할 수 있습니다!


 

그림 1. 색상 형식의 인기도


색상 선택 


148 개의 CSS 색상이 있으며 투명 및 currentcolor 특수 값은 포함되지 않습니다. 더 읽기 쉬운 스타일링을 위해 문자열 이름으로 이들을 사용할 수 있습니다. 가장 인기 있는 명명 된 색상은 의심 할 여지없이 흑백이며 빨간색과 파란색입니다.


 

그림 2. 상단 이름이 지정된 색상.


언어는 흥미롭게도 색을 통해 유추 됩니다. 영국식 "회색"보다 미국식 "회색"이 더 많습니다. 거의 모든 회색 색상 (회색, 연회색, 진회색, 슬레이트 회색 등)은 "e"대신 "a"로 철자를 쓸 때 거의 두 배의 사용량을 가졌습니다. gr [a / e] ys가 결합되면 파란색보다 높은 순위를 차지하여 4 위 자리에 굳어지게 됩니다. 그렇기 때문에 차트에서 은이 회색보다 "e"로 높은 등급을 받는 이유가 여기에 있습니다!


색상 수 


웹에서 몇 개의 다른 글꼴 색이 사용됩니까? 따라서 이것은 고유 한 색상의 총 수가 아닙니다. 오히려 텍스트에만 사용되는 색상의 수입니다. 

이 차트의 숫자는 상당히 높으며 경험에 따르면 CSS 변수가 없으면 간격, 크기 및 색상이 신속하게 벗어날 수 있으며 스타일에 따라 많은 작은 값으로 나눌 수 있습니다. 

이 숫자는 스타일 관리의 어려움을 반영하며, 이는 팀이나 프로젝트로 다시 돌아올 수 있는 관점을 만드는 데 도움이 되기를 바랍니다. 

이 숫자를 어떻게 관리 가능하고 합리적인 금액으로 줄일 수 있습니까?

 

그림 3. 페이지 당 색상 분포


색 복제 


글쎄, 우리는 여기서 궁금해서 한 페이지에 몇 개의 중복 색상이 있는지 검사하고 싶었습니다. 재사용 가능한 클래스 CSS 시스템을 엄격하게 관리하지 않으면 복제본을 쉽게 만들 수 있습니다. 

중앙값에 중복이 충분하여 사용자 지정 속성으로 통합하기 위해 통과 할 가치가 있음이 밝혀졌습니다.


 

그림 4. 페이지 당 중복 색상 분포


Units 


CSS에는 rem, px, em, ch 또는 cm와 같은 다른 단위 유형을 사용하여 동일한 시각적 결과를 얻는 여러 가지 방법이 있습니다! 어떤 단위 유형이 가장 인기가 있습니까?


 

그림 5. 단위 유형의 인기도.


Length and sizing 


놀랍게도, 위의 그림 5에서 px는 가장 많이 사용되는 단위 유형이며, 웹 페이지의 약 95 %가 어떤 형태 또는 다른 형태의 픽셀을 사용하는 웹 페이지의 약 95 %입니다 (요소 크기, 글꼴 크기 등일 수 있음). 

그러나 em 단위는 거의 90 %의 사용률로 인기가 있습니다. 이것은 웹 페이지에서 빈도가 40 %에 불과한 rem 장치보다 2 배 이상 유명합니다. 

차이점이 무엇인지 궁금하다면 em은 부모 글꼴 크기를 기반으로 하고 rem은 페이지에 설정된 기본 글꼴 크기를 기반으로 합니다. em과 같이 구성 요소별로 변경되지 않으므로 모든 간격을 균등하게 조정할 수 있습니다.


실제 공간을 기준으로 한 단위의 경우 cm (또는 센티미터) 단위가 가장 인기 있고, 인치 (인치), Q가 가장 많이 사용됩니다. 이러한 유형의 단위는 인쇄 스타일 시트에 특히 유용하다는 것을 알고 있습니다. 이 설문 조사까지 Q 유닛이 존재한다는 것을 알지 못했습니다! 당신은?


이 장의 이전 버전에서는 Q 장치의 예상치 못한 인기에 대해 논의했습니다. 이 장을 둘러싼 커뮤니티 토론 덕분에 우리는 이것이 분석의 버그임을 확인했으며 그에 따라 그림 5를 업데이트했습니다.


뷰포트 기반 유닛 


뷰포트 기반 장치의 모바일 및 데스크톱 사용과 관련하여 장치 유형에서 더 큰 차이가 나타났습니다. 모바일 사이트의 36.8 %는 vh (뷰포트 높이)를 사용하는 반면 데스크톱 사이트의 31 %만이 사용합니다. 또한 vh는 vw (뷰포트 너비)보다 약 11 % 더 일반적이라는 것을 알았습니다. vmin (뷰포트 최소값)은 vmax (뷰포트 최대 값)보다 인기가 높으며 모바일에서는 약 8 %의 vmin을 사용하는 반면 vmax는 웹 사이트의 1 % 만 사용합니다.


맞춤 속성


사용자 정의 속성은 많은 CSS 변수를 호출합니다. 그래도 일반적인 정적 변수보다 역동적입니다! 그들은 매우 강력하고 커뮤니티로서 우리는 여전히 그들의 잠재력을 발견하고 있습니다.


5% 

그림 6. 사용자 정의 특성을 사용하는 페이지 백분율


우리는 이것이 가장 좋아하는 CSS 추가 중 하나의 건강한 성장을 보여주기 때문에 흥미로운 정보 인 것처럼 느꼈습니다. 

2016 년 또는 2017 년 이후 모든 주요 브라우저에서 사용할 수 있었으므로 상당히 새롭다고 말할 수 있습니다. 많은 사람들이 여전히 CSS 전 처리기 변수에서 CSS 사용자 정의 속성으로 전환하고 있습니다. 맞춤 속성이 표준이 될 때까지 몇 년이 더 걸릴 것으로 예상됩니다.


Selectors 


ID vs class selectors 


CSS는 스타일링을 위해 페이지에서 요소를 찾는 몇 가지 방법이 있으므로 ID와 class를 서로 대입하여 어느 것이 더 널리 퍼져 있는지 확인하십시오! 결과는 그리 놀라운 일이 아닙니다. class이 더 인기가 있습니다!


 

그림 7. 페이지 당 선택기 유형의 인기도



멋진 후속 조치 차트는 클래스가 스타일 시트에서 찾은 선택기의 93 %를 차지함을 보여줍니다.


 

그림 8. 선택 기당 선택기 유형의 인기도


Attribute selectors 


CSS에는 매우 강력한 비교 선택기가 있습니다. 이들은 [target = "_ blank"], [attribute ^ = "value"], [title ~ = "rad"], [attribute $ = "-rad"] 또는 [attribute * = "value"]와 같은 선택기입니다. 

당신은 그들을 사용합니까? 그들이 많이 사용되는 것 같아요? 웹에서 ID 및 클래스와 함께 사용되는 방법을 비교해 보겠습니다.


 

그림 9. ID 속성 선택 기당 연산자의 인기도


 

그림 10. 클래스 속성 선택 기당 연산자의 인기도



이 연산자는 ID보다 클래스 선택기에서 훨씬 더 인기가 있습니다. 스타일 시트는 일반적으로 클래스 선택기보다 ID 선택기가 적지 만 여전히 모든 조합의 사용법을 알기 때문에 자연스럽습니다.


Classes per element 


디자인 룩을 달성하기 위해 요소에 10 개 이상의 클래스를 구성 할 수 있는 OOCSS, 원자 및 기능 CSS 전략의 등장으로 흥미로운 결과를 얻을 수 있습니다. 모바일 및 데스크톱의 중앙값이 요소 당 1 클래스 인 쿼리가 상당히 흥미로워졌습니다.


1 

그림 11. 클래스 속성 (데스크톱 및 모바일) 당 클래스 이름의 중간 수


Layout 


Flexbox 


Flexbox는 자식을 지시하고 정렬하는 컨테이너 스타일입니다. 즉, 제약 조건 기반 방식으로 레이아웃을 도와줍니다. 

사양은 2010 년과 2013 년 사이에 2 ~ 3 건의 매우 급격한 변화를 겪어 감에 따라 웹에서 상당히 시작되었습니다. 다행히도, 2014 년까지 모든 브라우저에 정착하여 구현되었습니다. 

그러나 그 이후로 몇 년이 지났습니다! 그것은 지금 꽤 인기가 있으며 그것에 관한 많은 기사와 그것을 활용하는 방법을 가지고 있지만 다른 레이아웃 전술과 비교하여 여전히 새롭습니다.


 

그림 12. flexbox 채택.


웹의 거의 50 %가 스타일 시트에서 flexbox 사용법을 가지고 있기 때문에 여기에 표시된 성공 사례.


Grid 


flexbox와 마찬가지로 그리드도 수명 초기에 몇 가지 사양을 변경했지만 공개적으로 배포 된 브라우저의 구현을 변경하지 않았습니다. 

Microsoft는 가로 스크롤 디자인 스타일의 기본 레이아웃 엔진으로 Windows 8의 첫 번째 버전에서 그리드를 사용했습니다. 처음에는 그 웹 사이트를 조사하고 웹으로 전환 한 다음 2017 년 마지막 릴리스까지 다른 브라우저에서 강화했습니다. 

거의 모든 브라우저가 동시에 구현을 릴리스했기 때문에 매우 성공적으로 시작되었습니다. 그리드 지원을 위한 하루. 오늘날 2019 년 말에도 그리드는 여전히 블록의 새로운 아이처럼 느껴집니다. 사람들은 여전히 ​​그 힘과 능력에 눈을 뜨고 있습니다.


2% 

그림 13. 그리드를 사용하는 웹 사이트의 백분율


이것은 웹 개발 커뮤니티가 최신 레이아웃 도구를 얼마나 연습하고 탐색했는지 보여줍니다. 우리는 사이트를 구축 할 때 기본 레이아웃 엔진 사용자가 의지하면서 그리드의 최종 인수를 기대합니다. 우리는 필자에게 그리드를 쓰는 것을 좋아합니다. 일반적으로 그리드에 먼저 도달 한 다음 레이아웃을 인식하고 반복하면서 복잡성을 되돌려 놓습니다. 앞으로 몇 년 동안이 강력한 CSS 기능을 사용하여 다른 국가에서 어떤 작업을 수행 할 것인지는 여전히 남아 있습니다.


Writing modes 


웹 및 CSS는 국제 플랫폼 기능이며, 쓰기 모드는 HTML 및 CSS가 요소 내에서 사용자가 선호하는 읽기 및 쓰기 방향을 나타내는 방법을 제공합니다.

 

그림 14. 방향 값의 인기도


Typography 


Web fonts per page 


웹 페이지에 몇 개의 웹 글꼴을 로드 하고 있습니까? 0? 10? 페이지 당 평균 웹 글꼴 수는 3입니다!


 

그림 15. 페이지 당로드 된 웹 글꼴 수의 분포


인기 있는 글꼴 모음 


페이지 당 총 글꼴 수에 대한 문의는 다음과 같습니다. 어떤 글꼴입니까?! 

디자이너가 조정하십시오. 이제 선택 사항이 인기 있는 항목과 일치하는지 확인할 수 있습니다.


 

그림 16. 최상위 웹 글꼴.


Open Sans는 CSS의 @ font-family 선언 중 거의 1 개를 지정하여 큰 승자입니다. 대행사의 프로젝트에서 Open Sans를 사용했습니다.


데스크톱과 모바일 채택의 차이점에 주목하는 것도 흥미롭습니다. 예를 들어, 모바일 페이지는 Open Sans를 데스크탑보다 약간 덜 사용합니다. 한편, 그들은 또한 Roboto를 약간 더 자주 사용합니다.


Font sizes 


한 페이지에 몇 개의 글꼴 크기가 있는지 사용자에게 물어 보면 일반적으로 5 개 또는 10 개 미만의 숫자를 반환하기 때문에 이것은 재미있는 것입니다. 디자인 시스템에서도 글꼴 크기는 몇 개입니까? 우리는 웹에 쿼리를 했고 모바일에서 중앙값은 40, 데스크톱에서 38이라는 것을 발견했습니다. 사용자 정의 속성에 대해 열심히 생각하거나 재사용 가능한 클래스를 만들어 유형 램프를 배포하는 데 도움이 될 수 있습니다.


 

그림 17. 페이지 당 고유 한 글꼴 크기 수의 분포


Spacing 


Margins 


여백은 팔을 몸 밖으로 밀 때 요구하는 공간과 같이 요소 외부의 공간입니다. 이것은 종종 요소 사이의 간격처럼 보이지만 그 효과에 국한되지는 않습니다. 웹 사이트 또는 앱에서 간격은 UX 및 디자인에서 큰 역할을 합니다. 여백 간격 코드가 얼마나 스타일 시트에 들어가는 지 봅시다.


 

그림 18. 페이지 당 고유 한 여백 값 수의 분포


꽤 많이 보인다! 중간 데스크톱 페이지는 모바일에서 96 개의 고유 한 여백 값과 104를 갖습니다. 

따라서 디자인에 고유 한 간격이 많이 생깁니다. 귀하의 사이트에 얼마나 많은 여백이 있는지 궁금하십니까? 이 공백을 어떻게 관리하기 쉽게 만들 수 있습니까?


논리적 특성 


0.6% 

그림 19. 논리적 특성을 포함하는 데스크탑 및 모바일 페이지의 백분율


우리는 margin-left와 padding-top의 헤게모니가 지속 기간이 제한적이며, 쓰기 방향에 상관없이 연속적이고 논리적 인 속성 구문을 보완 할 것으로 예상됩니다. 우리는 낙관적이지만 현재 사용량은 데스크톱 페이지에서 0.67 %로 상당히 낮습니다. 우리에게는 이것이 산업으로서 발전해야 할 습관 변화와 같은 느낌이 들며, 새로운 개발자가 새로운 구문을 사용하도록 훈련 시키기를 희망합니다.


z-index 


CSS에서 z-index를 사용하여 수직 레이어링 또는 스태킹을 관리 할 수 ​​있습니다. 우리는 사람들이 자신의 사이트에서 얼마나 많은 다른 가치를 사용하는지 궁금했습니다. z-index가 허용하는 범위는 이론적으로 무한하며 브라우저의 가변 크기 제한에 의해서만 제한됩니다. 모든 스택 위치가 사용됩니까? 보자!


 

그림 20. 페이지 당 고유 한 z- 색인 값 수의 분포


인기있는 Z- 색인 값 


우리의 직장 경험에서, 9의 숫자는 가장 인기 있는 선택으로 보였다. 비록 우리가 가능한 가장 적은 수를 사용하라고 가르쳤지만 그것은 공동의 표준이 아닙니다. 그렇다면 무엇입니까?! 사람들이 위에 물건이 필요한 경우 가장 인기 있는 z 인덱스 숫자는 무엇입니까? 음료를 내려 놓으십시오 이것은 당신이 그것을 잃을 수도 있을 정도로 재미있다.


 

그림 21. 가장 자주 사용되는 z 인덱스 값.


Decoration 


Filters 


필터는 브라우저가 화면에 그리려는 픽셀을 수정하는 재미 있고 좋은 방법입니다. 적용되는 요소, 노드 또는 레이어의 플랫 버전에 대해 수행되는 후 처리 효과입니다. Photoshop은 사용하기 쉬워졌으며, Instagram은 맞춤형, 양식화 된 조합을 통해 대중에게 접근 할 수 있게 했습니다. 그들은 약 2012 년부터 주변에 있었고 그중 10 개가 있으며 독특한 효과를 만들기 위해 결합 될 수 있습니다.

78% 

그림 23. 필터 특성이 있는 스타일 시트를 포함하는 페이지의 백분율


스타일 시트의 78 %에 필터 속성이 포함되어 있음을 알게 되어 기뻤습니다! 그 숫자도 너무 높아서 약간 비린 것처럼 보였으므로 우리는 파고 들어서 높은 숫자를 설명하려고했습니다. 솔직히 말해서 필터는 깔끔하지만 모든 애플리케이션과 프로젝트에 적용되는 것은 아닙니다. 그렇지 않으면!


추가 조사 결과, FontAwesome의 스타일 시트에는 필터 사용과 YouTube 내장이 포함되어 있습니다. 따라서, 우리는 몇 가지 매우 인기 있는 스타일 시트에 피기 백 (piggybacking)함으로써 뒷문에서 필터가 잠겼다고 생각합니다. 또한 -ms-filter 존재도 포함되어 높은 비율의 사용에 기여할 수 있다고 생각합니다.


Blend modes 


블렌드 모드는 대상 요소의 플랫 버전에 대해 실행되는 후 처리 효과라는 점에서 필터와 유사하지만 픽셀 수렴과 관련이 있다는 점에서 고유합니다. 달리 말하면, 블렌드 모드는 2 픽셀이 겹칠 때 서로 영향을 미치는 방식입니다. 위쪽 또는 아래쪽에 있는 요소는 블렌드 모드가 픽셀을 조작하는 방식에 영향을 줍니다. 16 가지 블렌드 모드가 있습니다. 가장 인기 있는 모드를 봅시다.

8% 

그림 24. * -blend-mode 특성이 있는 스타일 시트를 포함하는 페이지의 백분율


전반적으로 블렌드 모드의 사용은 필터보다 훨씬 낮지 만 여전히 적당히 사용되는 것으로 충분합니다.


Web Almanac의 차후 버전에서는 개발자가 곱하기, 화면, 색상 번, 밝게 하기 등과 같이 사용 중인 정확한 모드에 대한 아이디어를 얻기 위해 혼합 모드 사용으로 드릴 다운하는 것이 좋습니다.


Animation 


Transitions 


CSS는 이러한 놀라운 보간 기능을 가지고 있어 이러한 값을 전환하는 방법에 대한 단일 규칙을 작성하기 만하면 사용할 수 있습니다. 앱에서 상태를 관리하기 위해 CSS를 사용하는 경우 작업을 수행하기 위해 얼마나 자주 전환을 사용하고 있습니까? 웹을 쿼리 하자!


 

그림 25. 페이지 당 전환 수 분포


꽤 좋습니다! 우리는 animate.css를 포함 할 인기 있는 라이브러리로 보았습니다.이 라이브러리는 수많은 전환 애니메이션을 가져 오지만 사람들이 UI 전환을 고려하는 것은 여전히 ​​좋은 일입니다.


Keyframe animations 


CSS 키 프레임 애니메이션은 보다 복잡한 애니메이션 또는 전환에 적합한 솔루션입니다. 효과를 보다 잘 제어 할 수 있도록 보다 명확하게 표현할 수 있습니다. 하나의 키 프레임 효과처럼 작거나 강력한 애니메이션으로 구성된 많은 키 프레임 효과로 클 수 있습니다. 페이지 당 평균 키 프레임 애니메이션 수는 CSS 전환보다 훨씬 적습니다.


 

그림 26. 페이지 당 키 프레임 수의 분포


Media queries 


미디어 쿼리를 통해 CSS는 다양한 시스템 수준 변수에 연결하여 방문 사용자에게 적합하게 조정할 수 있습니다. 이러한 쿼리 중 일부는 인쇄 스타일, 프로젝터 스크린 스타일 및 뷰포트 / 스크린 크기를 처리 할 수 ​​있습니다. 오랫동안 미디어 쿼리는 주로 뷰포트 지식에 활용되었습니다. 디자이너와 개발자는 작은 화면, 큰 화면 등에 맞게 레이아웃을 조정할 수 있습니다. 나중에 웹은 점점 더 많은 기능과 쿼리를 가져 오기 시작했습니다. 즉, 미디어 쿼리는 이제 뷰포트 기능 외에도 접근성 기능을 관리 할 수 ​​있습니다.


미디어 쿼리로 시작하기에 좋은 곳은 페이지 당 몇 개입니까? 일반적인 페이지는 몇 가지 순간이나 상황에 반응하고 싶어한다고 생각합니까?


 

그림 27. 페이지 당 미디어 쿼리 수의 분포


인기 있는 미디어 쿼리 중단 점 크기 


뷰포트 미디어 쿼리의 경우 모든 유형의 CSS 단위를 평가를 위해 쿼리 식으로 전달할 수 있습니다. 

초기에는 사람들이 em과 px를 쿼리에 전달했지만 시간이 지남에 따라 더 많은 단위가 추가되어 웹에서 일반적으로 발견되는 크기 유형에 대해 매우 궁금해졌습니다. 

대부분의 미디어 쿼리는 널리 사용되는 장치 크기를 따르는 것으로 가정하지만, 가정하는 대신 데이터를 살펴 보겠습니다.


 

그림 28. 미디어 쿼리에 가장 많이 사용되는 스냅 포인트.


위의 그림 28은 가정의 일부가 옳았다는 것을 보여줍니다. 전화 크기는 확실히 많지만 그렇지 않은 것도 있습니다. 이 차트의 범위를 넘어 em을 사용하는 몇 가지 속임수를 사용하여 픽셀 우위를 점하는 방법도 흥미롭습니다.


Portrait vs landscape usage 


인기 있는 중단 점 크기에서 가장 많이 사용되는 쿼리 값은 768 픽셀 인 것으로 보아 궁금해졌습니다. 이 값은 주로 세로 레이아웃으로 전환하는 데 사용 되었습니까? 768px는 일반적인 모바일 세로 뷰포트를 나타내는 것으로 가정 할 수 있기 때문입니까? 

따라서 세로 및 가로 모드 사용의 인기를 확인하기 위해 후속 쿼리를 실행했습니다.


 

그림 29. 미디어 쿼리 방향 모드 채택.


흥미롭게도 세로는 많이 사용되지 않지만 가로는 훨씬 더 많이 사용됩니다. 우리는 세로 레이아웃 케이스만큼 768px가 충분히 신뢰할 수 있다고 가정 할 수 있습니다. 

또한 데스크톱 컴퓨터를 사용하는 사람들은 자신의 작업을 테스트하면서 브라우저를 찌그러뜨리는 것처럼 쉽게 모바일 레이아웃을 보기 위해 초상화를 트리거 할 수 없다고 가정합니다. 말하기는 어렵지만 데이터는 매혹적입니다.


가장 인기 있는 단위 유형 


지금까지 살펴본 너비 및 높이 미디어 쿼리에서 픽셀은 UI를 뷰포트에 적용하려는 개발자가 선택하는 주요 단위로 보입니다. 우리는 이것을 독점적으로 쿼리하고 싶었고 실제로 사람들이 사용하는 단위 유형을 살펴 보았습니다. 우리가 찾은 것이 있습니다.


 

그림 30. 미디어 쿼리 스냅 포인트에서 단위 채택.


min-width vs max-width 


사람들이 미디어 쿼리를 작성할 때 일반적으로 특정 범위를 초과하거나 미달하는 뷰포트를 확인합니까, 아니면 둘 다 크기 범위에 있는지 확인합니까? 웹에 물어 보자!


 

그림 31. 미디어 쿼리 스냅 포인트에 사용 된 속성 채택.


명확한 승자가 없습니다. 최대 너비와 최소 너비가 거의 동일하게 사용됩니다.


Print and speech 


웹 사이트는 디지털 종이처럼 느껴지나요? 사용자는 일반적으로 브라우저에서 인쇄를 하여 해당 디지털 컨텐츠를 실제 컨텐츠로 바꿀 수 있는 것으로 알려져 있습니다. 웹 사이트는 그 사용 사례를 위해 스스로를 변경할 필요는 없지만, 원한다면 가능합니다! 덜 알려진 것은 도구 나 로봇이 웹 사이트를 읽는 사용 사례에서 웹 사이트를 조정할 수있는 능력입니다. 

그렇다면 이러한 기능을 얼마나 자주 활용합니까?


 

그림 32. all, print, screen 및 speech 유형의 미디어 쿼리 채택.


Page-level stats 


Stylesheets 


홈페이지에서 얼마나 많은 스타일 시트를 참조하십니까? 앱에서 몇 개입니까? 모바일 대 데스크톱에 어느 정도 서비스를 제공합니까? 여기에 다른 사람들의 도표가 있습니다!


 

그림 33. 페이지 당로드 된 스타일 시트 수의 분포


Stylesheet names 


스타일 시트의 이름은 무엇입니까? 경력 전반에 걸쳐 일관된 적이 있습니까? 천천히 수렴하거나 일관되게 분기 했습니까? 이 차트는 라이브러리 인기도에 대한 간략한 설명과 인기 있는 CSS 파일 이름도 크게 보여줍니다.


Stylesheet nameDesktopMobile
style.css2.43%2.55%
font-awesome.min.css1.86%1.92%
bootstrap.min.css1.09%1.11%
BfWyFJ2Rl5s.css0.67%0.66%
style.min.css?ver=5.2.20.64%0.67%
styles.css0.54%0.55%
style.css?ver=5.2.20.41%0.43%
main.css0.43%0.39%
bootstrap.css0.40%0.42%
font-awesome.css0.37%0.38%
style.min.css0.37%0.37%
styles__ltr.css0.38%0.35%
default.css0.36%0.36%
reset.css0.33%0.37%
styles.css?ver=5.1.30.32%0.35%
custom.css0.32%0.33%
print.css0.32%0.28%
responsive.css0.28%0.31%


그림 34. 가장 자주 사용되는 스타일 시트 이름.


모든 창조적 인 파일 이름을 보십시오! 스타일, 스타일, 기본, 기본, 모두 그래도 하나는 눈에,습니까? BfWyFJ2Rl5s.css는 가장 인기 있는 4 위를 차지합니다. 우리는 그것을 조금 연구하고 가장 좋은 추측은 Facebook "like"버튼과 관련이 있다는 것입니다. 그 파일이 무엇인지 아십니까? 우리는 이야기를 듣고 싶어하기 때문에 의견을 남겨주세요.


Stylesheet size 


이 스타일 시트는 얼마나 큽니까? CSS 크기가 걱정할 만한 것입니까? 이 데이터로 판단 할 때 CSS는 페이지 팽창의 주범이 아닙니다.


 

그림 35. 페이지 당로드 된 스타일 시트 바이트 수 (KB) 분포.


각 컨텐츠 유형에 대해 웹 사이트가 로드 하는 바이트 수에 대한 자세한 내용은 페이지 가중치 장을 참조하십시오.


Libraries 


CSS 라이브러리가 새 프로젝트를 시작하기 위해 도달하는 것이 일반적이고 대중적이며 편리하며 강력합니다. library에 갈 수 있는 사람은 아니지만 2019 년에 웹을 쿼리하여 어느 팩을 주도하고 있는지 확인했습니다. 우리처럼 결과가 놀랍다면, 우리가 얼마나 작은 개발자 버블을 살 수 있는지에 대한 흥미로운 단서라고 생각합니다. 일이 크게 인기를 느낄 수 있지만 웹을 조사 할 때 현실은 약간 다릅니다.


LibraryDesktopMobile
Bootstrap27.8%26.9%
animate.css6.1%6.4%
ZURB Foundation2.5%2.6%
UIKit0.5%0.6%
Material Design Lite0.3%0.3%
Materialize CSS0.2%0.2%
Pure CSS0.1%0.1%
Angular Material0.1%0.1%
Semantic-ui0.1%0.1%
Bulma0.0%0.0%
Ant Design0.0%0.0%
tailwindcss0.0%0.0%
Milligram0.0%0.0%
Clarity0.0%0.0%

그림 36. 주어진 CSS 라이브러리를 포함하는 페이지의 백분율.


이 차트는 부트스트랩이 구직에 도움이 되는 귀중한 라이브러리임을 시사합니다. 도움이 될 수 있는 모든 기회를 보십시오! 또한 이것은 긍정적 인 신호 차트 일 뿐입니다. 모든 사이트가 CSS 프레임 워크를 사용하는 것은 아니기 때문에 수학은 100 %가 되지 않습니다. 모든 사이트의 절반 이상이 알려진 CSS 프레임 워크를 사용하지 않습니다. 매우 흥미롭습니다!


Reset utilities 


CSS 재설정 유틸리티는 기본 웹 요소에 대한 기준을 정규화 하거나 만들려고 합니다. 모르는 경우 각 브라우저는 모든 HTML 요소에 대해 고유 한 스타일 시트를 제공하며 각 브라우저는 해당 요소의 모양이나 동작에 대한 고유 한 결정을 내립니다. 재설정 유틸리티는 이러한 파일을 살펴보고 공통점을 찾은 후 차이점을 찾아내어 개발자가 한 브라우저에서 스타일을 지정하고 다른 브라우저에서도 동일하게 보일 것이라는 합리적인 확신을 갖게 되었습니다.


사이트를 몇 개나 사용하고 있는지 살펴 보겠습니다! 그들의 존재는 상당히 합리적으로 보이므로 얼마나 많은 사람들이 자신의 전술에 동의하고 사이트에서 사용합니까?


 

그림 37. CSS 재설정 유틸리티 채택


웹의 약 3 분의 1이 normalize.css를 사용하고 있으며, 이는 작업에 대한보다 부드러운 접근 방식으로 간주 될 수 있으며 재설정하는 것입니다. 우리는 조금 더 깊이 살펴 보았고 Bootstrap에 normalize.css가 포함되어 있으며 이는 대량의 사용량을 설명합니다. normalize.css가 Bootstrap보다 더 많이 채택되어 자체적으로 사용하는 사람들이 많다는 점도 주목할 가치가 있습니다.


@supports and @import 


CSS @supports는 브라우저가 특정 속성 값 조합이 유효한지 구문 분석했는지 확인한 다음 확인이 true로 반환되면 스타일을 적용하는 방법입니다.


 

그림 38. CSS "at"규칙의 인기.


@supports가 2013 년 대부분의 브라우저에서 구현되었다는 점을 고려할 때 많은 양의 사용과 채택을 보는 것은 그리 놀라운 일이 아닙니다. 우리는 여기 개발자들의 마음 챙김에 깊은 인상을 받았습니다. 이것은 사려 깊은 코딩입니다! 모든 웹 사이트의 30 %가 사용하기 전에 일부 디스플레이 관련 지원을 확인하고 있습니다.


이에 대한 흥미로운 후속 조치는 @imports보다 @supports가 더 많이 사용된다는 것입니다! 우리는 그것을 기대하지 않았습니다! @import는 1994 년부터 브라우저에있었습니다.


결론 


데이터 마인에는 훨씬 더 많은 것이 있습니다! 많은 결과가 우리를 놀라게 했고 우리는 그들이 당신을 놀라게했을뿐입니다. 이 놀라운 데이터 세트는 요약을 매우 재미있게 만들었으며, 결과의 일부가 왜 그런지 이유를 찾아 내고자 하는지 조사 할 수 있는 많은 단서와 길을 남겼습니다.


가장 놀라운 결과는 무엇입니까? 빠른 쿼리를 위해 코드베이스로 향하는 결과는 무엇입니까?


이러한 결과에서 가장 큰 장점은 사용자 정의 속성이 스타일 시트의 성능, 건 조성 및 확장 성 측면에서 비용 대비 최고의 효과를 제공한다는 것입니다. 우리는 인터넷의 스타일 시트를 다시 문지르고 새로운 자료와 도발적인 차트 취급을 추구 할 것입니다. 질문, 질문 및 어설션이 포함 된 의견으로 @una 또는 @argyleink에 문의하십시오. 우리는 그것들을 듣고 싶습니다!



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 9회 ]  작성일19-11-30 17:29
CSS

웹학교