브라우저 호환성 소개

이 글에서 우리는 다음과 같이 할 것이다.

브라우저 호환성 정의

CanIUse 데이터 활용 방법

브라우저 접두사 정의

Autoprefixer 및gulp

자동 접두사 사용 학습
초보자 학습 웹 개발에 관한 시리즈와 영상 중 15편이다.Learn more about the series and see the post schedule >
다음 비디오를 보거나 확장된 성적표를 첨부할 수 있습니다.
Review the source code >
본 수업을 시작하려면 1회부터starter project, 또는 14회부터review the source files를 열어 주십시오.
먼저 브라우저 호환성의 의미를 살펴보겠습니다.

Browser compatibility refers to the fact that not all CSS properties are supported, or not supported in the same way, across all browsers.

데스크톱 호환성을 생각하면 크롬, Firefox, Safari, Internet Explorer에 주목합니다.Opera Mini나 Amazon Silk 같은 모바일 기기에 특정한 브라우저도 있습니다.일부 브라우저는 아시아 위주의 UC 브라우저와 같은 특정 지역을 대상으로 합니다.

일반적으로 Chrome, Firefox, Safari, Internet Explorer(일명 IE) Edge 및 더 높은 버전에 집중하면 마케팅 대상이 주로 미국이나 비영어 사용자인 경우를 제외하고는 대부분의 사용자에게 적용 가능한 범위를 제공할 것입니다.저는 개인적으로 이런 도전에 익숙하지 않기 때문에 시청자를 위해 유행하는 브라우저를 연구하도록 격려합니다.
CSS 속성의 브라우저 호환성을 발견하고 사용자의 브라우저 사용을 추정하는 데 도움을 주는 CanIUse라는 도구가 있습니다.
방문caniuse.com, 우리는 "grid"를 검색할 것입니다. 이것은 우리가 카드 수업에서 사용한 디스플레이 값이자 CSS의 비교적 새로운 속성입니다.

내가 이 자원을 사용하는 전형적인 과정은 우선 사용 비율을 검사하는 것이다.이 수업을 작성할 때 이 숫자는 93.5%로 추정된다. 이는 93.5%의 방문자가 격자에 좋은 지원을 하는 브라우저를 사용할 것이라는 것을 의미한다.
그리고 우리가 언급한 4대 브라우저, 특히 인터넷 익스플로러를 보겠습니다.2020년 1월 15일까지 알려진 바와 같이 인터넷 익스플로러는 최근 CSS(grid 포함)에 추가된 지원을 계속 뒤떨어졌기 때문이다.그때부터 IE는 크롬 브라우저를 사용했는데, 이것은 현재 호환성 면에서 크롬과 비슷하다는 것을 의미한다.
CanIUse는 녹색 강조 표시로 완전히 호환되며 빨간색 강조 표시로 호환되지 않으며 노란색 강조 표시로 지원됩니다.IE 12-15와 같은 노란색 셀에 마우스를 걸면 지원되지 않는 내용에 대한 자세한 정보를 얻을 수 있습니다.이 경우 이 브라우저 버전은 지원되지만 접두사 -ms 만 지원됩니다.
응, 접두사가 뭐야?

A prefix refers to the way browser makers flag certain in-progress feature additions and is commonly used to onboard new CSS properties.

브라우저 제조업체가 이 기능을 충분히 지원하고 CSS 속성 규범이 충분히 완전하다는 것을 확인하면 이후 버전에서 접두사를 삭제하여 CSS 규범에서 확정된 이름과 값을 지원할 수 있습니다.
Autoprefixer, 온라인 제공autoprefixer.github.io이라는 접두사를 생성하는 데 다른 도구를 사용할 수 있습니다.

우리는 lefthandeditor에서 .example 클래스를 우리의 .card-row 클래스로 업데이트할 것이다.오른쪽에서 Autoprefixer가 값의 접두사 버전display: grid을 생성한 것을 볼 수 있습니다.
우리는 CaniUse로부터 접두사가 이전 버전의 IE에서만 필요하다는 것을 알았기 때문에 중요한 것은 접두사와 미접두사-ms-grid 값을 포함해야 한다는 것이다.이것은 대부분의 브라우저에서 호환할 수 있는 가장 좋은 기회를 제공합니다.CSS 종속 연결로 인해 접두사가 없는 속성 이름은 규칙에서 순서대로 맨 뒤에 배치하는 것도 중요하다.
VSCode에서 프로젝트를 엽니다.
오늘, 우리가 프로젝트를 실행하기 전에, 우리는 구축에 Autoprefixer를 추가할 것이다. 그러면 우리는 온라인 도구를 사용하여 수동으로 접두사를 추가하는 것이 아니라, 자동으로 접두사를 추가할 수 있다.
터미널에서 Autoprefixer를 설치하려면 display 를 입력합니다.
설치가 완료되면 Autoprefixer가 우리의 구축 과정에 사용할 수 있도록 npm install --save-dev autoprefixer 를 조수로 실행해야 합니다.
그리고 npm install --save-dev gulp-postcss 를 열면 맨 위에 추가됩니다.

    const postcss = require("gulp-postcss");
    const autoprefixer = require("autoprefixer");

그러면 도구가 로드되고 gulpfile.js 단계에서 구축 프로세스에 추가되어야 하므로 함수에 포함됩니다.

    // .src(paths.styles.src)
    .pipe(postcss([autoprefixer({ grid: true })]))
    // .pipe(gulp.dest(paths.styles.dest))

주문이 중요하기 때문에 최종 분산 파일에 브라우저 접두사를 포함하기 위해 파일을 style 폴더로 보내기 전에 포함합니다.
마지막으로 dist 을 열고 다음 package.json 그룹을 파일 끝에 추가해야 합니다.

    "browserslist": [
        "last 2 versions",
        "> 0.2%",
        "not dead"
      ]

이것은 마지막 두 버전을 지원하는 브라우저에 필요한 접두사를 추가하는 것을 의미합니다. 이 접두사는 "사기"로 간주되거나 시장 사용률의 0.2% 보다 낮지 않은 경우를 제외하고는.browserl.ist 서비스를 확인하면 어떤 브라우저를 포함하는지 정확하게 볼 수 있습니다.

프레젠테이션을 위해 우리는 browserslist 파일에서 다른 내용을 잠시 변경할 것이다.gulpfile.js 함수에서, 우리는 watch 원본 파일이 아니라 브라우저에 컴파일 파일을 제공하도록 설정할 것입니다.이렇게 하면 우리는 브라우저에서 접두사 스타일을 볼 수 있다.
다음에 터미널에서 start 명령baseDir: "./dist/"을 입력하여 프로젝트를 실행하고 브라우저 URL을 업데이트하여 npm run start을 포함합니다.
프로세스를 실행하기 위해 /card-layout.html 를 열고 저장해야 합니다.우리가 방금 접두사를 추가했기 때문에, 이전에 저장한 파일에 대해 이 동작을 실행하지 않았습니다.
브라우저를 찾아보기 전에 터미널에 메쉬의 일부 속성과 IE와의 호환성에 대한 두 가지 새로운 메시지가 표시됩니다. CanIUse를 확인하여 영향을 받는 IE 버전을 확인할 수 있습니다.

브라우저에서 스타일을 보는 것으로 전환합시다.Chrome을 사용하기 때문에 메쉬를 완전히 지원합니다.하지만 우리 card-layout.css 를 검사해 봅시다.

이제 접두사를 생략한 버전이 Inspector에 표시됩니다.이 접두사들은 Chrome에서 지원되지 않고 필요하지 않기 때문이다.반대로 그것은 그것들을 건너뛰고 단순 autoprefix 의 지원 속성을 사용합니다.
Chrome은 접두사 .card-row 를 식별할 수 없기 때문에 닫기 display: grid 를 테스트할 때 격자 디스플레이를 사용할 수 없습니다.

우리는 display: grid 에서 변경한 것을 다시 -ms 에서 서비스로 회복할 수 있다.
이제 CSS를 계속 작성할 수 있습니다. 우리가 알고 있는 바와 같이 Autoprefixer가 어떤 속성을 식별하려면 접두사가 필요합니다. 이 동작을 자동으로 실행합니다!
이 과정에서 우리는 그것을 완전히 연구하는 데 시간이 걸리지는 않지만, 많은 데스크톱과 모바일 브라우저를 모의하여 CSS 레이아웃을 볼 수 있는 도구가 있다.가장 인기 있는 것은 BrowserStack 이며, 유한한 무료 계좌가 있다.이 도구를 사용하면 각종 브라우저에서 웹 사이트를 열고 시각적 검사를 해서 접두사를 따로 추가해서 해결할 수 없는 다른 문제를 발견할 수 있습니다.
일단 게시된 웹 사이트가 생기면, 방문자가 실제로 사용하는 브라우저를 분석 도구로 이해할 수 있다.그리고 이 데이터를 사용하여 브라우저에서 문제를 해결하는 데 시간을 들일 가치가 있는지 확인할 수 있습니다.

Next up in Episode 16: Responsive Design