플랫폼을 받아들이십시오-CSS 튜토리얼-php.cn

플랫폼을 받아들이십시오

그렇다면 사람들이 할 수있는 일은 웹 사이트를 개선하는 것 입니다 . 그 대답을 위해 시간을 거슬러 올라 갑시다…

올해는 1998 년이며 웹은 증가하고 있습니다. Tim Berners-Lee는 www의 아키텍처에 대한 높은 수준의 개요를 제공하기 위해 “ Tim Berners-Lee는“5 만 피트의 웹 아키텍처”라는 논문을 게시합니다. 이 보고서에는 콘텐츠 협상, 시맨틱 웹, HTML, CSS 및 Cool URI (변경되지 않음) 등 많은 것들이 다루었습니다.

이 기사에서 Berners-Lee는 몇 가지 디자인 원칙을 매우 일찍 주목합니다. 이러한 원칙 중 하나는“최소 권력의 규칙”입니다.

최소력의 규칙은 다음과 같습니다.

컴퓨터 시스템을 설계 할 때는 종종 정보 게시에 다소 강력한 언어를 사용하거나 제약을 표현하거나 문제를 해결하기위한 선택에 직면하게됩니다. […]“최소력의 규칙”은 주어진 목적에 적합한 가장 강력한 언어를 선택할 것을 제안합니다.

우리는 프론트 엔드를 위해 웹에서 사용할 수있는 세 가지 주요 언어가 있습니다.

HTML

내용을 의미 적으로 설명합니다

CSS

프리젠 테이션 및 레이아웃을 제어합니다

자바 스크립트

상호 작용과 행동을 추가합니다

최소력의 규칙은 CSS에 의지하기 전에 HTML을 사용하여 가능한 한 많은 노력을 기울일 것을 제안합니다. CSS가 더 이상 충분하지 않으면 JavaScript를 찾으십시오. 그러나 실제로 필요한 경우에만 가능합니다.

Derek Featherstone은 잘 말합니다.

웹 프론트 엔드 스택 (HTML, CSS, JS 및 ARIA)에서 스택에서 더 간단한 솔루션으로 문제를 해결할 수 있다면 스택에서 문제를 해결할 수 있습니다. 덜 깨지기 쉬우 며 더 완벽하며 작동합니다.

? 보류 : 이것은 마크 업을 통해 글꼴 크기와 색상을 설정해야한다는 의미는 아닙니다. 웹의“Olden”날에했던 일입니다. 사례 : Berners-Lee의 작품에서 다루는 규칙 중 하나는 형태와 내용의 분리입니다.

깨진 웹

Berners-Lee가 그 기사를 발표 한 지 거의 25 년이 지났습니다. 그러나 어떻게 든 그가 보낸 메시지는 통과하지 못했고 많은 개발자 (전부는 아님)는 그것을 알지 못합니다. 이 상황을 겪으십시오.

내 브라우저는 지난 28 년 동안 HTML 양식을 제출하는 데 완벽하게 유능했지만, 어떤 어리석은 이유로 일부 개발자는 JavaScript의 양식을 다시 구현하기로 결정했으며 이제는 개발 도구를 열지 않고 전기 요금을 지불 할 수 없습니다.

안타깝게도 이것은 고립 된 경우가 아니라 친숙한 현상입니다. 너무 자주, 나는 영리하거나 바퀴를 재창조하려고 시도하는 웹 사이트와 도서관을 본다. 그렇게하려는 시도에서, 그들은 목표와 정반대를 달성합니다. 해당 웹 사이트는 기능이 덜 작동하거나 접근성이 떨어지거나 심지어는 특정 조건에서 전혀 작동하지 않습니다.

양식은 친숙한 예일 수 있지만 최소 전력 규칙을 적용하면 더 나은 결과를 제공하는 상황이 더 있습니다.

부드러운 스크롤?
? CSS가 그렇게 할 수 있기 때문에 JavaScript가 필요하지 않습니다.
JSON 기반 API의 오류를 전달해야합니까?
? 응답 본문에 {error : true}가있는 HTTP 200을 사용하지 말고 오류를 대신 통신하기위한 HTTP 상태 코드를 사용하지 마십시오.
JavaScript를 통해 을 닫으십니까?
? [method = "대화"]가있는
요소는 잘 작동합니다.
게으른 부하 이미지를 원하십니까?
? 이는 곧 모든 최신 브라우저에서 HTML 마크 업에서 속성을 직접 지원할 것입니다.
사용자 정의 가능한 ?
? 그것은 우리가 말하는대로 발전 중입니다.
애니메이션을 스크롤 오프셋에 연결하고 싶습니까?
? 외부 JavaScript 라이브러리는 이제 브라우저 네이티브 API이므로 CSS 만 사용하여 수행 할 수있는 것도 필요하지 않습니다.
양식 입력의 특정 문자를 방지해야합니까?
? 붙여 넣기를 비활성화하지 말고 적절한 입력 유형을 선택하거나 패턴 속성을 사용하십시오.
붕괴 섹션이 필요하십니까?
? 및
는 친구입니다.
등…

이 모든 예에서는 일부 기능을 상단에서 하단 층으로 이동할 수 있습니다. Berners-Lee는 우리를 자랑스럽게 생각합니다.

회복력

웹 플랫폼의 핵심에 가까운 웹 스택에서 더 낮은 기술을 선택함으로써 실패에 대한 탄력성의 이점을 얻습니다.

JavaScript는 실패 할 때 끔찍합니다. 프로세스에서로드하거나 실패하지 않는 하나의 스크립트 또는 기능에 대한 잘못된 인수 하나이며 전체 앱이 더 이상 작동하지 않을 수 있습니다. "정의되지 않은 속성 X를 읽을 수 없음"과 같은 오류 메시지가 당신에게 친숙하게 들리면, 내가 무슨 말을하는지 알고 있습니다.

반면에 CSS는 실패에 매우 능숙합니다. 스타일 시트 중 하나에 구문 오류가 있더라도 나머지 CSS는 여전히 작동합니다. HTML과 동일합니다. 이들은 용서하는 언어입니다.

왜 최소력의 규칙을 사용해야하는지 의심한다면 Jeremy Keith는 그의 기사“기술 평가”에서 답을 제공합니다.

우리는“얼마나 잘 작동합니까?”라고 묻는 경향이 있지만, 실제로 물어봐야 할 것은“얼마나 잘 실패합니까?”입니다.
제레미 키이스

우리는 더 잘할 수 있습니다

최소력의 규칙으로부터 혜택을 누릴 수있는 유명한 웹 사이트는 Nike 웹 사이트입니다. JavaScript Disabled로 사이트를 방문 할 때 이미지를 볼 수 없으며 신발을 주문하지도 않습니다.

JavaScript에 대한 이러한 과잉 의존은 Frontend 스택에서 더 낮은 기술로 깨진 기능을 구축 할 수 있으므로 필요하지 않습니다.

요소를 즉시 포함하여 신발 사진을 JavaScript를 통해 동적으로 주입하는 대신 신발 사진을 보여주지 않겠습니까?

☝️ 왜 누군가가 JavaScript 비활성화로 웹을 탐색 할 것인지 궁금하다면 : 종종 선택이 아니라 방해하는 외부 요인입니다. "모두가 JavaScript가 있습니까?" 주제에 대한 좋은 설명.

이 카테고리에서 더 나쁜 범죄자는 Instagram 및 Twitter와 같은 유명한 사이트입니다. JavaScript가 없으면이 웹 사이트는 전혀 작동하지 않습니다. 그들은 당신에게 경고를 주거나 간단히 비어 있습니다. 언제부터 웹에 텍스트와 이미지를 표시하는 데 JavaScript가 필요합니까?

진보적 인 향상

이 고립 된 Nike 예만큼 나쁘지 않아도됩니다. 때로는 JavaScript가 실패했을 때 작동을 거부하는 작은 구성 요소입니다. 탭 인터페이스를 예로 들어보십시오. 많은 것을 찾을 수 있지만 이 기능을 제공하는 JavaScript 라이브러리 인 Kicker는 HTML, CSS 및 Aria 자체가 이미 당신을 매우 멀리 할 수 있기 때문에 JavaScript가 필요하지 않다는 것입니다.

기본 레이어가 제자리에 있으면 JavaScript를 사용하여 경험을 향상시킵니다. JavaScript를 요구 사항 대신 향상으로 생각하십시오.

사용 가능하거나 사용할 수없는 특정 CSS 기능에 대해서도 마찬가지입니다. 기본 스타일을 제공하고 기능을 사용할 수있는 경우 (@supports를 사용하여 감지 할 수있는) 이미 가지고있는 결과를 향상시킵니다.

이 접근법은 점진적 향상 으로 알려져 있습니다. 더 많은 기능을 사용할 수있게함에 따라 기능을 추가하여 경험이 진행되는 한 결과를 더 좋게 만들지 만 기능이 더 번성하지 않으면 기능이 작동하지 않습니다.

또한 특정 새로운 기능을 아직 지원하지 않는 브라우저의 경우 해당 기능을 브라우저에 제공하는 폴리 필을 찾아 볼 수 있습니다.

웹이 따라 잡는다

웹의 초기부터 웹 플랫폼이 시간이 지남에 따라 많은 새로운 기능을 얻는 것을 보았습니다. 새로운 HTML 요소가 정의되었고, JavaScript (언어)가 성숙되었으며 CSS는 레이아웃, 애니메이션 요소 등을 구축하기위한 많은 강력한 새로운 기능을 얻었습니다.

몇 년 전에 불가능했고 플래시와 같은 외부 기술에 의존하여 만 수행 할 수있는 일은 이제 브라우저 자체에 내장되어 있습니다.

전형적인 예는 JQuery가 소개 한 기능입니다. 10 년 전, JQuery는 프로젝트에 가장 먼저 떨어졌습니다. 오늘날, 웹 플랫폼이 따라 잡히고 지금은 문서를 가지고 있기 때문에 더 이상 그렇지 않습니다. Polyfills도 Polyfills라고하기 전에 JQuery가 Polyfill이라고 말할 수 있습니다.

jQuery는 친숙한 예일 수 있지만 웹이 따라 잡은 다른 많은 상황이 있습니다.

JavaScript에서 매우 나쁜 날짜 () API로 어려움을 겪고 있습니까?
? 시간적 API는 작업하기가 더 좋습니다.
타사 JavaScript 라이브러리를 사용하여 화면의 요소를 애니메이션합니까?
? 내장 된 웹 애니메이션 API를 시도해 보지 않겠습니까? 정말 강력합니다.
컬러 라디오 버튼과 확인란이 필요하십니까?
? 새로운 CSS Accent-Color Property가 귀하를 위해 그렇게합니다.
CSS 변수를 사용할 수 있도록 전처리 서에 의존합니까?
? CSS Custom Properties는 지난 20 년 동안 CSS에 가장 큰 추가 기능입니다.
등…

여기서 중심 테마는 이러한 기능이 더 이상 폴리 필 또는 외부 라이브러리에 의존하지 않지만 웹 스택의 핵심에 더 가깝게 이동했다는 것입니다. 웹이 따라 잡는다.

이 새로운 API 중 일부는 매우 추상적 일 수 있지만 코드에 연결할 수있는 라이브러리가 있습니다. 예를 들어 REDAXIOS는 후드 아래에서 Fetch를 사용하면서 개발자 친화적 인 Axios 호환 API를 노출시킵니다. 이러한 편의 방법이 결국 웹 플랫폼으로 들어가면 놀라지 않을 것입니다.