머스타드를 자르면서 Flexbox로 마이그레이션합니다-CSS 튜토리얼-php.cn

Migrating to Flexbox by Cutting the Mustard

머스타드를 자르면서 Flexbox로 마이그레이션합니다 키 테이크 아웃

이 기사는 CSS의 레이아웃을 구조화하기 위해 CSS 플로트 사용에서 Flexbox 로의 전환에 대해 설명합니다. Flexbox의 구 및 트위너 구문의 한계를 강조하고 새로운 구문을 완전히 구현하는 트위너 구문 및 브라우저 버전 만 타겟팅하는 것이 좋습니다. "머스타드 절단"또는 기능 감지 개념은 사용중인 브라우저/장치/사용자 에이전트를 식별하고 사용 가능한 기술에 가장 적합한 솔루션을 제공하는 방법으로 도입됩니다. 이것은 일반 JavaScript를 사용하거나 Modernizr을 사용하여 수행 할 수 있습니다. 저자는 SASS를 사용하여 CSS 출력의 크기를 줄이고 유지하기가 더 쉽다고 제안합니다. 또한 Flexbox의 구현은 점진적인 향상의 개념으로 인해 각 경험에서 정확히 동일하게 보이지 않을 것이라고 언급합니다. 이 기사는 새로운 기능이 브라우저에 대한 새로운 기능이 개발되면서 미래의 요구 사항에 맞게 적응하고 진화 할 수 있음을 강조함으로써 결론을 내립니다. 독자들이 다음 프로젝트에서 Flexbox에 대해 잘 알고있는 것을 권장합니다.

프론트 엔드 개발자로서, 시간은 CSS 수레를 사용하여 멀어지고 새롭고 흥미 진진한 Flexbox 세계로 뛰어 들었습니다. CSS 플로트는 스타일링 레이아웃에 대한 날짜의 접근 방식입니다. 버전 4.0 이후 Internet Explorer에서 사용할 수 있었으며 해결할 수 있도록해야합니다 (Clearfix Hack 및 랩핑에 Nth-Child 의사 클래스 사용). 이 기사의 주요 주제는 조각화를 고려한 여러 브라우저에서 Flexbox를 구현하는 방법입니다. Flexbox에 더 익숙해 지려면 사용 가능한 많은 리소스가 있으며 다음을 강력히 권장합니다.
우리는 Flexbox를 사용할 준비가 되었습니까? Sitepoint 에 Nick Salloum에 의해 CSS- 트릭에서 Chris Coyier의 Flexbox에 대한 완전한 가이드 MSDN의 Internet Explorer 10 (옵션)의 Flexible Box ( "Flexbox") 레이아웃 (옵션).
이 기사가 끝나면 다음과 같이 할 수 있어야합니다.
반응 형 웹 사이트를 대상으로하는 Flexbox 버전을 이해하십시오. 피처 감지 (겨자 절단)를 통해 Flexbox를 사용하고 레거시 브라우저에 대한 폴백을 제공합니다. 대부분의 상황에서 IE 조건부 주석을 사용하는 것을 멀리 이동하십시오.
레거시 폴백이있는 기본 2 × 2 그리드를 생성하여 Flexbox에 실질적인 용도를 보여줍니다.
Flexbox의 간단한 역사 Flexible Box 레이아웃 모듈 (일명 Flexbox)은 CSS에서 레이아웃을 구성하는 새로운 방법입니다. 그것은 여러 개정을 거쳤으며 비교적 짧은 존재에서 크게 발전했습니다. Flexbox를 작성할 때 Flexbox는 여전히 W3C 작업 초안이지만 다른 표준과 마찬가지로 프로덕션 환경에서는 매력적이지 않아야합니다.
. 표준에는 세 가지 반복이 있으며, 일반적으로 이전 구문, 트윈 서 구문 및 새로운 구문이라고합니다. Flexbox의 한계는 잘 문서화되어 있습니다
기존 구문은 Flex-Wrap을 지원하지 않습니다 트위너 구문은 IE 10 (모바일 포함)에서만 지원됩니다. 새로운 구문은 Firefox (22-27)에서 Flex-Wrap 및 Flex 흐름 속성이 없어서 완전히 구현되지 않았습니다.
랩핑 (Flex-Wrap)은 사양의 중요한 기능으로, 반응 형 그리드를 만들려면 필요합니다. 이러한 이유로 새로운 구문을 완전히 구현하는 트위너 구문 및 브라우저 버전 만 타겟팅하는 것이 가장 좋습니다. 이것은 다음 브라우저 버전으로 남겨 둡니다
인터넷 익스플로러 10 (-ms- 접두사가있는 트위너 구문) 인터넷 익스플로러 11 및 에지 (새 구문) Firefox 28 (New Syntax) Chrome 21-28 (-webkit- 접두사가있는 새로운 구문) Chrome 29 (New Syntax) safari 6.1 (-webkit- 접두사가있는 새로운 구문) iOS Safari 7.0 (-webkit- 접두사가있는 새로운 구문)

Flexbox를 지원하지 않는 시장 점유율이 상당한 브라우저가 있으므로 CSS 플로트를 사용하는 것으로 바뀌어야합니다. 그러나 이것이 어떻게 코드로 표현 될 수 있습니까? Flexbox 대신 플로트로 CSS를 수신 해야하는 브라우저 버전을 구별하는 가장 좋은 방법은 무엇입니까? 새로운 구문을 지원하지만 랩핑을 지원하지 않는 Firefox 버전을 보장하기 위해 어떤 전략을 사용할 수 있습니까? 소개 : 머스타드 자르기. 겨자 절단 (피처 감지) 이전에 기술 용어로 들어 본 적이 없다면 BBC News의 개발 팀이“머스타드 절단”을 만들어 냈습니다. 이 용어는 BBC 웹 사이트가 방대한 국제적인 잠재 고객을 수용하고 브라우저 버전과 장치를 대상으로해야한다는 사실에서 비롯된 것입니다. 특별히 번거로운 솔루션이었을 것입니다.
. 개념의 요점은 어떤 브라우저/장치/사용자 에이전트가 사용되는지를 식별하고 폴리 플릴을 제공하여 사이트를 작동시킬 수 있습니다. 특정 기능의 존재는 클라이언트 측에서 감지되므로 사용 가능한 기술에 가장 적합한 솔루션이 제공됩니다. 기능 감지는 새로운 것이 아닙니다. 앞서 언급 한 BBC 기사는 2012 년 3 월에 출판되었으며 인기가 높아졌지만 2008 년 Paul Irish가 대중화 한 IE 특정 조건부 클래스를 여전히 구현하는 것은 놀라운 일입니다. Modernizr (Paul Irish가 기여)는 기능 감지에 관한 것입니다.
멋진 새로운 웹 기술을 활용하는 것은 뒤쳐진 브라우저를 지원해야 할 때까지 재미 있습니다. ModernIzr을 사용하면 브라우저가 기능을 지원하는지 여부에 관계없이 조건부 JavaScript 및 CSS를 쉽게 처리 할 수 있습니다. 진보적 인 향상을 쉽게 수행하는 데 적합합니다.

CSS는 현재 기본 기능 감지를 가지고 있지만 현재 실제 사용을 위해 시장 점유율이 충분하지 않습니다. 이 기사의 나머지 부분은 JavaScript의 기능 감지에 유리한 IE 조건부 의견을 버리는 방법에 대해 논의 할 것입니다. 피처 및 브라우저 식별 모든 프로젝트에는 기능을 위해 다른 기능 세트가 필요합니다. 기능 탐지를 실현할 수있는 여러 가지 방법이 있습니다. 가장 쉬운 것은 다음을 포함합니다.
Plain JavaScript 사용 (BBC에서 사용하는대로) Modernizr 사용 (이 기사에서 사용될 것) 가장 효율적인 접근법은 바닐라 JavaScript 구현입니다. 클라이언트가 추가 라이브러리를 다운로드 할 필요가 없기 때문에 빠르며 추가 처리가 필요하지 않습니다. 이 접근법은 알려진 문제가 있기 때문에 완벽하지 않습니다. 그러나 일반적인 기능 탐지 문제를 극복하는 방법이 있습니다.

[b] 로우저 감지는 불가능한 엉킴이되었으며, 훨씬 더 나은 무언가로 대체되기 위해 사용이 크게 떨어졌습니다. […] 기능 감지도 완전히 신뢰할 수있는 것은 아닙니다. 실패한 시간이 있습니다.
-
James Edwards

겨자를 자르기 위해 ModernIzr을 선택하는 것은 효율적이지 않을 수 있지만 (다운로드 및 클라이언트 처리가 필요하므로) Flex-Wrap 지원을 수동으로 감지하는 것은 간단한 작업이 아닙니다. ModernIZR 버전 2는 Flex-Wrap을 감지하지는 않지만 버전 3은 그렇습니다! 이 기능은 Flex 라인 랩핑으로 표시됩니다 옵션은 ModernIzr (예 : html.flexwrap)에서 생성 한 문서 루트에 첨부 된 CSS 클래스를 사용하는 옵션이 있지만 사이트의 다운로드 크기를 줄이기 위해 각 경험에 대해 별도의 CSS 파일을 제공하는 것이 좋습니다.
. BBC 뉴스 개발자는 두 가지 유형의 브라우저를 나타냅니다.
팀의 누군가가 그것들을“HTML4 브라우저”와“HTML5 브라우저”라고 언급하기 시작했는데, 이는 우리가 감정을 비 기술적 인 사람들에게 더 쉽게 전달하는 것이 더 쉽다는 것을 알았습니다.
- BBC 응답 뉴스
이 이론적 근거는 2012 년 브라우저 환경의 기후를 고려할 때 완벽하게 유효했습니다. 그러나 새로운 기능을 사용할 수있게되면서 부서가 반드시 명확하지는 않습니다. 예를 들어 Flexbox는 모든 "HTML5"브라우저에서 완전히 지원되지 않습니다. 강력한 접근 방식은 "레거시"와 "현대"브라우저 버전을 구별하는 것입니다. 또한 일부 프로젝트는 반쯤 (또는 "전환") 브라우저를 식별 할 수있는 여러 부서가 필요할 수 있습니다. 접근 구현 다음 파일을 작성하여 시작하십시오
index.html - 기본 HTML 파일 스타일 시트/modern.css - 현대식 브라우저를위한 스타일 (미디어 쿼리, 포장이있는 Flexbox) 스타일 시트/레거시. > 스크립트/의존성 .js - 기능 감지를 수행합니다 여기에 index.html 파일이 보이는 방법은 다음과 같습니다 IE 조건부 의견이 없음을 알 수 있습니까? 깨끗하고 유효한 HTML 코드. 브라우저에 JavaScript가 활성화되지 않은 경우 지원 수준에 관계없이 Legacy.css를 사용하는 것으로 되돌아갑니다. 스크립트 태그가 HTML 페이지 상단에 있음을 알 수 있습니다. Modernizr은 브라우저 페인트 전에 처음으로 스타일 시트를 처리하고 주입해야하기 때문입니다. 이렇게하면 리 페인트가 줄어들고 해소되지 않은 콘텐츠 (FOUC)의 플래시를 피하는 데 도움이됩니다. 그러나 대부분의 스크립트 태그는 페이지 하단에있을 것임을 기억하십시오.
<.> 우리의 legacy.css 파일에는 다음이 포함됩니다
이 구현에는 클리어 픽스 해킹과 래핑을위한 Nth-Child 의사 클래스가 포함됩니다. 대부분의 브라우저에서 작동합니다. 그러나 Internet Explorer 8은 선택기를 작동시키기 위해 Selectivizr 또는 동등한 솔루션이 필요합니다. 다음, 우리의 Modern.css 파일 :
이 파일의 크기로 꺼지 마십시오. 주석은 더 크게 보이지만 각 섹션이 무엇을 목표로하는지 이해하기가 더 쉬워집니다. 다음에 우리는 종속성에 대한 코드를 작성합니다 .js. 언급 한 바와 같이, Flex-Wrap 속성의 지원을 감지하는 Modernizr (버전 3) 버전을 생성해야합니다. JavaScript 파일 상단에 코드를 포함시킵니다.

당신은 선택적으로 IsModern Boolean에 추가하여 현대 경험에 대한 요구 사항을 늘릴 수 있습니다. 예를 들면 :

Sass 솔루션
Sass를 사용하여 Flexbox 구현에 대한 접근 방식을 추상화 할 수 있습니다. 이렇게하면 CSS 출력의 크기가 줄어들고 유지하기가 더 쉬워집니다.
<!DOCTYPE html> <html class="no-js"> <head> <title>Cutting the mustard</title> <script src="javascripts/dependencies.js"></script> <noscript> <link rel="stylesheet" href="stylesheets/legacy.css"> </noscript>  </head> <body> <div class="container"> <div class="cell cell-1">Cell 1</div> <div class="cell cell-2">Cell 2</div> <div class="cell cell-3">Cell 3</div> <div class="cell cell-4">Cell 4</div> </div> </body> </html>
로그인 후 복사
진보적 인 향상 및 브라우저 테스트
Flexbox와 CSS 플로트의 차이점을 이해하는 것이 중요합니다. 구현은 각 경험에서 정확히 동일하게 보이지는 않지만 진보적 인 향상의 개념은 반드시 필요하지 않다는 것을 의미합니다. 예를 들어, 기본적으로 Flexbox는 같은 행의 모든 셀을 동일한 높이를 갖도록 스트레칭합니다. 따라서, 하나의 셀이 3 줄 길이이고 인접한 행의 길이가 10 줄인 경우 배경은 두 셀에서 10 줄로 늘어납니다. CSS 플로트의 폴백은이 작업을 수행하지 않을 것이며 두 셀은 모두 고르지 않습니다. 여러 브라우저에서 레이아웃을 테스트하는 것은 여전히 요구 사항이지만, JavaScript에서 IsModern의 값을 강제로 강요하면 모든 브라우저에서 레거시 솔루션을 테스트하는 데 도움이 될 수 있습니다.

결론 이 기사에서는 동일한 HTML 코드베이스에서 두 개의 다른 스타일 시트를 제공하기 위해 기능 감지를 사용하기위한 기본 사항을 제공했습니다. 이것은 CSS 플로트에서 업그레이드 프로세스를 시작하고 IE 조건부 의견에 대한 의존성을 줄이는 매우 효과적인 방법입니다. Flexbox에 대한 지원을 감지하는 데 중점을 두었지만 브라우저를 위해 새로운 기능이 개발되므로 겨자 절단에 대한 이러한 접근 방식은 미래의 요구 사항에 맞게 조정하고 진화 할 수 있습니다.
. 인터넷 익스플로러 10이 대상 부문의 브라우저 시장 점유율로 인기가 떨어지면 Tweener 구문을 버리고 새로운 구문의 사용을 통해서만 leaner 코드를 제공 할 수 있습니다. 이제 모든 이론이 있었으므로 다음 프로젝트에서 Flexbox를 잘 알고 있지 않습니까? Flexbox로 마이그레이션하고 레거시 JavaScript를 피하는 것에 대해 자주 묻는 질문
Flexbox로 마이그레이션하는 것이 무엇입니까?

Flexbox로 마이그레이션하는 것은 현대적인 웹 개발의 중요한 단계입니다. Flexbox 또는 Flexible Box 레이아웃은 화면 크기에 따라 컨테이너의 반응 형 요소를 자동으로 배열 할 수있는 CSS3 웹 레이아웃 모델입니다. 이는 웹 페이지의 레이아웃이 다양한 화면 크기에 쉽게 적응하여 다양한 장치에서 원활한 사용자 경험을 보장 할 수 있음을 의미합니다. 또한 플로트 또는 포지셔닝을 사용하지 않고 유연하고 반응 형 레이아웃 구조를 설계하는 프로세스를 단순화합니다.
최신 브라우저에 레거시 자바 스크립트를 제공하는 방법은 내 웹 사이트의 성능에 어떤 영향을 미칩니 까? 웹 사이트의 성능에 크게 영향을 줄 수 있습니다. 레거시 JavaScript는 종종 최신 브라우저가 필요하지 않은 불필요한 코드로 부풀어 오릅니다. 이 추가 코드는 브라우저가 다운로드, 구문 분석, 컴파일 및 실행해야하므로 웹 사이트 속도를 늦출 수 있습니다. 현대식 브라우저에 현대식 JavaScript를 제공하면 웹 사이트의로드 시간과 전반적인 성능을 향상시킬 수 있습니다. 최신 브라우저에 레거시 JavaScript를 제공하지 않는 방법은 무엇입니까?
최신 브라우저에 레거시 JavaScript를 제공하지 않으려면 모듈/명명 패턴을 사용할 수 있습니다. 이 패턴을 사용하면 현대적인 '모듈'번들과 레거시 인 'Nomodule'번들 인 JavaScript의 두 개의 개별 번들을 만들 수 있습니다. 'type =”module”속성을 이해하는 최신 브라우저는 최신 번들을 다운로드하는 반면, 오래된 브라우저는이를 무시하고 대신 레거시 번들을 다운로드 할 것입니다.

기존 레이아웃 방법을 통해 Flexbox를 사용하면 어떤 이점이 있습니까?
Flexbox는 기존 레이아웃 방법에 비해 몇 가지 장점을 제공합니다. 유연한 레이아웃 구조를 허용하여 반응 형 웹 사이트를보다 쉽게 설계 할 수 있습니다. 또한 컨테이너 내의 요소의 정렬, 분포 및 순서를 단순화합니다. Flexbox를 사용하면 기존 CSS에서 어려운 복잡한 레이아웃과 정렬을 쉽게 달성 할 수 있습니다.
Flexbox로 마이그레이션 할 때 원활한 전환을 어떻게 보장 할 수 있습니까?

Flexbox로 마이그레이션하는 것은 복잡 할 수 있습니다. 특히 기존의 대규모 프로젝트에 대한 프로세스. 마이그레이션을 시작하기 전에 Flexbox 모델을 철저히 이해하는 것이 중요합니다. 간단한 레이아웃을 실험하여 점차 더 복잡한 레이아웃으로 이동하십시오. 한 번에 하나의 구성 요소를 마이그레이션하고 각 변경 사항을 철저히 테스트하는 단계별 접근 방식을 사용하십시오.
최신 브라우저에 레거시 JavaScript를 제공하는지 확인하는 데 어떤 도구를 사용할 수 있습니까?

Google Lighthouse, GTMetrix 및 WebPageTest와 같은 도구를 사용하면 최신 브라우저에 레거시 JavaScript를 제공하는지 식별 할 수 있습니다. 이 도구는 웹 사이트의 성능을 향상시킬 수있는 영역을 강조 표시하는 상세한 성능 보고서를 제공합니다.
레거시 브라우저와 함께 Flexbox를 사용할 수 있습니까?

Flexbox는 최신 레이아웃 모델이지만 어느 정도 수준이 있습니다. 구형 브라우저에서의 지원. 그러나 불일치와 버그가있을 수 있습니다. CSS에 필요한 공급 업체 접두사를 추가하여 구형 브라우저와의 호환성을 보장 할 수있는 AutoPrefixer와 같은 도구를 사용하는 것이 좋습니다. Flexbox로의 마이그레이션이 SEO에 영향을 미치는 방법?

Flexbox로 마이그레이션하는 방법은 양의 영향을 미칠 수 있습니다. 서. 반응이 좋고 빠르게로드되는 웹 사이트는 더 나은 사용자 경험을 제공하며 이는 SEO의 핵심 요소입니다. 또한 더 빠르게로드되는 웹 사이트는 검색 엔진에서 크롤링 및 색인화 될 가능성이 높습니다.
Flexbox로 마이그레이션 할 때 일반적인 과제는 무엇입니까?

Flexbox로 마이그레이션 할 때 일반적인 문제는 다음과 같습니다. 브라우저 불일치를 다루고 뒤로 호환되는 새로운 레이아웃 모델. 일관된 사용자 경험을 보장하기 위해 다양한 브라우저 및 장치에서 웹 사이트를 철저히 테스트하는 것이 중요합니다. Flexbox 및 최신 JavaScript에 대해 더 많이 배울 수 있습니까?
Flexbox 및 최신 JavaScript에 대해 배울 수있는 수많은 온라인 리소스가 있습니다. CSS- 트릭, MDN 웹 문서 및 SitePoint와 같은 웹 사이트는 포괄적 인 가이드 및 자습서를 제공합니다. 또한 Codecademy 및 Freecodecamp와 같은 온라인 코딩 플랫폼은 이러한 주제에 대한 대화식 수업을 제공합니다.

위 내용은 머스타드를 자르면서 Flexbox로 마이그레이션합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!