웹을 본 후 생각
와, 나는 이것이 오는 것을 보지 못했다! HTTP 아카이브는 Web Almanac이라는이 큰“웹 사이트”보고서를 삭제하여 게스트 작가가 580 만 웹 사이트의 데이터를 탐색했습니다.
Una Kravetz와 Adam Argyle은 CSS 장을 썼습니다. 요점은 산의 데이터에서 소화 가능한 통찰력을 짜는 것입니다. 그래서 여기에는이 장에 대한 나의 생각에 더 빨리 읽는 아이러니가 있습니다.
- 사이트의 83%가 RGBA ()를 사용하지만 22%만이 RGB ()를 사용합니다. RGB ()는 나에게 물어 보면 특히 유용한 색상 형식이 아니기 때문에 완전히 의미가 있습니다. 기능 제어 투명성 형식을 제공하는“A”(Alpha)는 최근 8 자리 육각 코드 형태로 가장 인기있는 형식 인 Hex로만 사용할 수 있습니다. 그러나 그럼에도 불구하고 RGBA ()만큼 좋지 않습니다. hsla ()는 아마도 가장 좋은 색 형식입니다.
- 흰색과 검은 색이 가장 인기있는 두 가지 이름의 색상이라는 것은 놀라운 일이 아닙니다. 나는 이름으로 많이 사용합니다. 심지어 CSS는 #fff 대신 흰색을 사용하여 #000 대신 흰색을 사용하기도합니다.
- EM은 REM보다 두 배나 인기가 있습니다. 우와. 나는 단지 덜 까다 롭고 예측 가능하다는 것을 알기 때문에 나는 나 자신입니다. 이론적으로, 나는 여전히 루트에서 px, 구성 요소의 REM 및 텍스트 요소에 대한 EM의 아이디어를 좋아하지만, 그것을 깨끗하게 뽑아 낸 적이 있는지는 확신 할 수 없습니다.
- 수업은 지금까지 선택기 유형의 리더입니다. 얼마나 많은 사람들 이 사용되는지를 고려하면 다른 것에 대해 10 배 이상의 리드가 있습니다. 나는 그것을보고 싶다. 그들은 낮지 만 더 낮은 특이성 값을 가지고 있습니다. 그들은 그들을 조작하기위한 멋진 API를 가지고 있습니다. 그들의 전체 목적은 스타일링 훅이되는 것입니다. 그것들은 요소에 대한 비수성입니다. 스타일링을하는 올바른 방법입니다. 당신이 스타일을 유지하고, 두통이 줄어들수록, 당신이 가질 수 있습니다. 그래도 소수점을 정말로 알고 싶어합니다. 1.1 이었습니까? 1.4? 1.00001?
- 거룩한 양동이. 사이트의 절반과 그리드의 Flexbox는 2 % 만?! 브라우저 지원은 그다지 다르지 않습니다. 나는 그들이 매우 유용하고 함께 사용될 수 있고 다른 것들을 위해 사용될 수 있다는 것을 잘 알고 있지만, 그리드는 일반적으로 더 유용하며 Flexbox보다 개인적으로 더 자주 사용합니다.
- 나는 사이트의 로드 된 글꼴의 중간 수를 평균 0으로 추측했지만 3입니다! 나는 CSS- 트릭이 하나를 가지고 있다고 생각합니다 (글을 쓰는 것은 루빅이며 타이틀에만 사용됩니다.이 사이트의 바디 글꼴은 시스템-UI입니다.) 그러나 실제로 4입니다. 사전로드 및 서브 세트 및 대담한 대 정기 등으로 인해 4입니다. 가변 글꼴이 언제 영향을 미치기 시작하는지 궁금합니다. 시간이 지남에 따라이 숫자를 낮출 것이라고 생각합니다. Open Sans와 Roboto는 다른로드 된 글꼴로 삼중이며 전체 목록은 일부 글꼴 인스턴스 외에 Google 글꼴입니다.
- 일부 주요 라이브러리가 특정 기능을 사용하기 위해 이러한 글로벌/보편적 척도로 통계를 왜곡시킬 수있는 방법은 재밌습니다. SMIL이라는 SVG 기술을 사용하여 YouTube의 재생 버튼이 일시 정지 버튼으로 "변형"하는 데 사용 된 방법을 기억합니다. 그러나 YouTube는 너무 커서 인터넷 트래픽의 비율이 매우 높으면 SMIL이 포함되어 있습니다. 필터가 해당 보고서에 있습니다. 필터는 시원하지만 실제로는 YouTube Embeds와 Font Awesome의 스타일 시트 (78%)의 비율이 놀랍도록 높아 보인다는 사실입니다.
- 전환 및 애니메이션을 매우 많이 사용하는 페이지 중 전환은 약 2 배에 크게 사용되지만 전환은 50 번째 백분위 수에서 6 배 더 많이 사용됩니다. 그것은 나에게 옳은 느낌입니다. 전환은 일반적으로 더 유용하지만 애니메이션이 많을수록 키 프레임과 같은 고급 도구에 더 많이 도달 할 수 있습니다.
- 대부분의 웹 사이트에는 약 45 개의 웹 사이트에 미디어 쿼리가있는 것 같습니다. 그것들이 다른 미디어 쿼리인지 또는 스타일 시트의 다른 곳에서 반복되는 동일한 미디어 쿼리 일 수 있는지는 완전히 명확하지 않습니다. 그들이 모두 다르면 많은 것처럼 보이므로 사람들이 명확성을 작성하기 위해 중첩 미디어 쿼리를 사용하고 거품이 나지만 특이성이 너무 이상하기 때문에 결합되지 않습니다. 사람들이 사용하는 고유 한 미디어 쿼리 수를보고 싶습니다. 미디어 쿼리 데이터에 대해 가장 매력적인 것은 Min-Width와 Max width가 목록과 넥이라는 것입니다. 내가 추측한다면 나는 맥스 폭을 훨씬 앞서 갔을 것이다.
- 사이트 당 약 6 개의 스타일 시트. 이와 같은 자산이 종종 CDN에서 호스팅되기 때문에 말하기가 너무 어려울 것이지만, 사이트에 대한 수작업이 얼마나 많은지, 제 3자가 얼마나 많은지 알고 싶습니다. 분포는 3과 3과 같습니까?
보고서에는 훨씬 더 많은 것이 있으며 CSS는 20 장 중 하나 일뿐입니다. 그러니 파고 들으십시오!
위 내용은 웹을 본 후 생각의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.

Google Fonts가 새로운 디자인 (트윗)을 출시 한 것을 볼 수 있습니다. 마지막 큰 재 설계와 비교할 때 이것은 훨씬 더 반복적 인 느낌이 듭니다. 차이를 간신히 말할 수 있습니다

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

플렉스 레이아웃의 보라색 슬래시 영역에 대한 질문 플렉스 레이아웃을 사용할 때 개발자 도구 (d ...)와 같은 혼란스러운 현상이 발생할 수 있습니다.

요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

프론트 엔드 개발에서 Windows와 같은 구현 방법 ...
