CSS를 포함하는 가장 좋은 방법은?@import를 사용하는 이유는 무엇입니까?
기본적으로 사용의 장점/목적이 무엇인지 궁금합니다.@import스타일시트를 기존 스타일시트로 가져오는 방법과 다른 스타일시트를 추가하는 방법...
<link rel="stylesheet" type="text/css" href="" />
문서의 책임자에게?
에서 볼 때, 지속도관보면서에점의페이,,@import스타일시트가 동시에 다운로드되는 것을 방지할 수 있기 때문에 CSS 파일은 거의 사용되지 않아야 합니다.예를 들어 스타일시트 A에 다음 텍스트가 포함된 경우:
@import url("stylesheetB.css");
그러면 첫 번째 스타일시트가 다운로드될 때까지 두 번째 스타일시트의 다운로드가 시작되지 않을 수 있습니다.반면에 두 스타일시트가 모두 참조되는 경우<link>두 요소를 동시에 다운로드할 수 있습니다.두 스타일시트가 항상 함께 로드되는 경우에는 단순히 하나의 파일로 결합하는 것도 유용할 수 있습니다.
가끔 이런 상황이 있을 때가 있습니다.@import적절하지만 일반적으로 예외이지 규칙은 아닙니다.
(2022 업데이트:현재 많은 전문 개발자들이 내부적으로 이러한 최적화를 처리할 수 있는 SAS와 같은 시스템 또는 React와 호환되는 프레임워크를 사용하여 CSS를 관리하고 있습니다.)
(2023 업데이트:또는 Tailwind와 같은 유틸리티 클래스 프레임워크가 인기를 끌기 시작했으며, 이는 처음에 작성할 CSS의 양을 줄일 것입니다.)
저는 악마의 옹호자 역할을 할 것입니다. 왜냐하면 사람들이 너무 동의하는 것을 싫어하기 때문입니다.
다른 스타일시트에 의존하는 스타일시트가 필요한 경우 @import를 사용합니다.다른 단계에서 최적화를 수행합니다.
언제든지 최적화할 수 있는 두 가지 변수가 있습니다. 코드의 성능과 개발자의 성능입니다.대부분의 경우는 아니더라도 개발자를 더 효율적으로 만들고 코드를 더 성능을 높이는 것이 더 중요합니다.
하나의 스타일시트가 다른 스타일시트에 종속되어 있는 경우 가장 논리적인 방법은 두 개의 별도 파일에 저장하고 @import를 사용하는 것입니다.그것은 코드를 보는 다음 사람에게 가장 논리적인 의미가 있을 것입니다.
언제 그런 의존성이 발생할까요?제 생각에는 꽤 드문 일입니다. 보통 스타일시트 한 장이면 충분합니다.그러나 다른 CSS 파일에 내용을 넣을 수 있는 논리적인 위치가 있습니다.
- 주제:동일한 페이지에 대해 다른 색 구성표나 테마가 있는 경우, 일부 구성요소는 공유할 수 있지만 모든 구성요소는 공유할 수 없습니다.
- 하위 구성 요소:조작된 예 - 메뉴가 포함된 레스토랑 페이지가 있다고 가정합니다.메뉴가 페이지의 나머지 부분과 매우 다른 경우 자체 파일에 있으면 관리하기가 더 쉬워집니다.
일반적으로 스타일시트는 독립적이므로 다음을 사용하여 모두 포함하는 것이 합리적입니다.<link href>그러나 이러한 계층이 종속 계층인 경우 가장 논리적으로 적합한 작업을 수행해야 합니다.
Python은 가져오기를 사용하고, C는 포함하며, JavaScript는 필요합니다.CSS에는 Import가 있습니다. 필요할 때 사용하세요!
사이트를 확장해야 하는 지점에 도달하면 모든 CSS를 연결합니다.
링크를 통해서든 @import를 통해서든 모든 종류의 여러 CSS 요청은 고성능 웹 사이트에 대한 나쁜 관행입니다.일단 최적화가 중요한 시점에 이르면 모든 CSS가 미니머를 통해 흘러야 합니다.Cssmin은 가져오기 문을 결합합니다. @Brandon이 지적했듯이 grunt는 이를 위한 여러 옵션을 가지고 있습니다. (이 질문 참조)
일단 최소화된 단계에 이르면,<link>사람들이 지적했듯이, 더 빠르기 때문에 기껏해야 몇 개의 스타일시트에 연결하고 가능한 경우 아무 것도 가져오지 않습니다.
그러나 사이트가 생산 규모에 도달하기 전에 코드가 약간 더 빨리 진행되는 것보다 체계적이고 논리적인 것이 더 중요합니다.
예, 항사용다니합을 사용하세요.@import웹 사이트의 외부 계단식 스타일 시트!
업데이트됨: 2022년 8월 22일
(지난 10년간 웹에는 사용에 대한 많은 허위 정보가 게시되었습니다.@import정정할 생각입니다.그러므로 아래의 제 정보를 주의 깊게 읽어주시기 바랍니다.)
규칙 1번
계단식 스타일 시트 관리를 위해 JavaScript API나 요령에 의존하지 마십시오!타사 공급업체 CSS 솔루션에 의존하지 마십시오!SAS, React, Modernizr, Bootstrap 또는 Angular를 사용하여 CSS를 관리하지 마십시오.알아요, 다 써봤어요.항상 손으로 작성한 CSS 텍스트 파일을 사용하여 계단식 스타일 시트를 직접 관리하면 사이트가 더 빠르게 실행될 뿐만 아니라 웹 사이트 설계와 사용자 경험을 완벽하게 제어할 수 있습니다.이렇게 제대로 설계되지 않은 시스템에 의존하면 수많은 시나리오에서 오류가 발생하고 사이트 속도가 느려지며 수많은 버전의 이전 브라우저에서 오류가 발생합니다.셀 수 없을 만큼 많은
규칙 2
네, 항상 사용하세요! 그것은 CSS를 사용하는 현대적인 해결책으로 아주 잘 작동합니다.강력 추천합니다!문제없이 수백 개의 브라우저에서 20년 이상 사용되었습니다.에 대한 잘못된 가정이 있습니다.@import이 없는 개발자들이것.@import일반적인 페이지 요청 시 웹 페이지 스크립트, HTML 또는 기타 자산의 다운로드를 "차단"합니다.이것들은 완전히 거짓입니다.제가 아래에서 증명하겠습니다!
규칙 3번
사용@importCSS에서는 페이지 로드 또는 구문 분석 속도가 느려지지 않습니다.다중@imports에 <style>요소는 모두 서로 병렬로 다운로드됩니다. (매우 오래된 IE 브라우저에서도 마찬가지입니다.)복수의 경우@import 안에서 <link>외부 스타일 시트도 모두 병렬로 다운로드되며 이를 보관하는 상위 스타일 시트와 동일한 연결을 사용합니다.그들은 부모 시트와 그것이 포함할 수 있는 CSS와 병렬로 다운로드하지 않을 뿐입니다.그것에 대한 자세한 내용은 나중에.
규칙 4번
CSS는 압축, 최소화, 전처리 등이 필요 없습니다.그리고 CSS 다운로드 크기나 @import를 사용하는 여러 개의 외부 CSS 파일은 웹에서 문제가 되지 않습니다.대부분의.style sheets are rarely over 30 kilobytes크기로이를 다음과 비교합니다.1-5 Megabytes in a typical JavaScript API library이는 대역폭 호그이며, CSS 다운로드가 브라우저 콘텐츠를 지연시키거나 속도를 늦추지 않는 이유를 알 수 있습니다.꼭 그 사실을 깨달아야 합니다.가져온 이 작은 스타일 텍스트 시트는 일반적인 웹 페이지 다운로드에서 훨씬 더 큰 다운로드 공간의 일부로, 현대 웹 페이지 표시 요청 중에 일반 사용자 브라우저의 블록 스트림에 밀어넣은 이러한 최신 JavaScript 라이브러리, 이모티콘, 이미지, 비디오 및 미디어 파일을 사용하면 크기가 폭발적으로 증가합니다.그렇기 때문에 다운로드 시간이 절약되거나 구문 분석 및 렌더 트리 표시가 거의 0이기 때문에 CSS를 압축하거나 SAS를 사용하여 사전 처리하지 말아야 합니다.
CSS를 차단하는 것은 문제가 되지 않으며, @import는 버그나 구식 기술이 아닙니다.이것은 20년 넘게 잘 작동해 온 매우 신뢰할 수 있는 오래된 코딩 솔루션입니다.
하지만 당신은 여전히 어떻게 그럴 수 있는지 궁금할 것입니다.@import진정으로 나를 도와줍니까?
예를 들어 보겠습니다.대부분의 개발자는 외부 스타일 시트를 가져와 모듈에서 관리하거나 특정 브라우저에서 숨기려는 스타일 섹션을 분할합니다.아래 링크된 이 시트에서는 가져온 모든 시트가 단일 상위 스타일 시트에 추가되어 한 위치에서 관리됩니다.브라우저에서 HTML 다운로드 중에 링크된 시트를 구문 분석하면 연결이 열려 있거나 재사용되고 이러한 모든 가져온 시트가 연결을 통해 서로 병렬로 다운로드됩니다.따라서 다음과 같이 가져온 외부 CSS 시트를 보관하기 위해 상위 시트를 추가합니다.
<link media="screen" rel="stylesheet" type="text/css" href="parent.css" />
...위의 parent.sheet 안에는 다음과 같은 정보가 있습니다.@import아이들.대부분의 브라우저에서 병렬로 다운로드하고 동일한 TCP 연결을 공유해야 합니다.대부분의 최신 웹 브라우저에는 6개 이상이 있으므로 CSS는 HTML 또는 다른 페이지 다운로드 및 구문 분석을 절대 차단하지 않습니다.게다가, 2022년의 많은 서버들은 이제 멀티플렉싱을 포함하는 HTTP2를 지원합니다. 이는 모든 작은 CSS 파일 다운로드가 이제 다른 요청과 단일 연결을 공유할 수 있다는 것을 의미합니다.이 작은 텍스트 파일은 최신 브라우저에서 다음을 사용하여 FAST를 다운로드합니다.@import!
@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');
두 에서, 아의두번예서에째, 들은이것래은▁these▁in.@import된 선언문<style>또한 태그는 모두 서로 병렬로 다운로드되어야 합니다. 단지 무작위로.다시 말하지만, 이것은 많은 오래된 브라우저와 최신 브라우저에서 이러한 방식으로 작동했습니다.제가 읽은 바로는, 그들은 다음을 사용하는 주문 문제가 있을 수 있습니다.@import이와 같이, 그러나 당신의 CSS는 이러한 유형의 디자인에서 캐스케이드 순서에 의존하는 경우가 거의 없습니다.그런데 글을 쓰는 데는 여러 가지 형식이 있습니다.@import형사용 합니다.@import url('mycss.css');최신 HTML5 브라우저가 가져오기 파일 CSS 코드를 안정적으로 구문 분석할 수 있는 기회를 개선하기 위해 이러한 유형의 미디어 쿼리를 작성할 때:
<style>
@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');
</style>
타임 일한시간유간시.@import에는 다음과 같은 제한된 시나리오가 있습니다.
- IE 버전 4-9를 사용하고 있는데, 주로 연결이 제한되었습니다(예: IE6은 서버에 2개만 연결되었습니다).이러한 브라우저를 사용하면 다양합니다.
@import그리고 연결된 CSS가 병렬로 다운로드되지 않습니다.는 영을미수있다니습에 영향을 미칠 입니다.<link>다운로드도이므로, 이것은 CSS에 대한.@import. - 의 첫 에는 위의첫번경다같음습다니과는우에째▁a다같▁above▁in니습.
<link>부모 스타일 시트는 가져온 시트를 보유합니다. 부모 시트는 먼저 CSS 파일을 연결하고 구문 분석해야 하므로 서버에 하나의 추가 연결을 추가합니다.그것은 논리적으로 타당하며 예상되어야 합니다.만약 당신의 시트에 가져오기만 있고 구문 분석할 CSS가 없다면, @import는 즉시 시작되고 부모와 동일한 연결을 사용하여 파일을 다운로드해야 합니다. - 의 첫 에는 위의첫번경다같음습다니과는우에째▁a다같▁above▁in니습.
<link>부모 스타일 시트는 여러 개의 가져온 시트를 보유하고 있으며, @imports 선언 후에 부모 시트에도 추가 CSS가 있다면, 예, 진정한 "차단" CSS 연결이 있을 것입니다.부모 CSS 파일을 먼저 다운로드해야 하는 경우, 먼저 CSS 구문 분석을 완료하고 다운로드한 후 @imports를 검색한 다음 @importstyle을 다운로드하여 파일이 완료되기 전에 파일의 CSS 앞에 배치합니다.이것은 논리적으로 타당하며 CSS 스타일 시트에서 CSS를 스타일 규칙과 절대 결합해서는 안 되는 이유입니다.절대 안 해요.상위 파일에서 CSS를 제거하면 지체 없이 상위 파일 연결을 통해 파일을 즉시 호출합니다. - 를 하면,
<link>가져온 규칙이 없는 스타일 시트와 링크된 스타일 시트가 있는 스타일 시트@import된 또내장형.<style>와 함께@importInternet Explorer에서만 일반적으로 병렬로 다운로드하지 않습니다.다른 브라우저에서 이 정도의 성능을 제공합니다.언급한 바와 같이 이것은 IE의 제한된 브라우저 연결과 관련이 있을 수 있습니다.
따라서 이러한 규칙에 따라 대부분의 상황에서 @import가 잘 작동합니다.주요 gotcha는 일반 CSS가 많은 시트에 @import를 추가할 때입니다.그런 유형의 것은 말이 되고 부모가 자신의 CSS를 구문 분석한 다음 추가적인 것을 발견하기 때문에 긴 지연을 야기할 것입니다.@imports.
최신 브라우저는 약 6개의 연결을 사용할 수 있다는 것을 명심하십시오.@import너무 많은 파일 또는 너무 많은 대용량 파일과 비동기식이 아닌 JavaScript가 웹 페이지의 구문 분석 및 렌더링을 차단하는 병목 현상이 아닙니다.그나저나, 당신의 일반적인 자바스크립트 API 다운로드는 현재 1.5메가바이트입니다.
@import를 사용하여 이전 브라우저 버전에서 CSS 디스플레이 관리
@import를 사용해야 하는 많은 좋은 이유들도 있습니다!
@import를 사용하는 강력한 이유 중 하나는 브라우저 간 디자인을 하기 위해서입니다.가져온 시트는 일반적으로 많은 오래된 브라우저에서 숨겨집니다. 따라서 Netscape 4 또는 이전 시리즈, Mac용 Internet Explorer 5.2, Opera 6 및 이전 버전, PC용 IE 3 및 4와 같은 매우 오래된 브라우저에 특정 형식을 적용할 수 있습니다.@import많은 오래된 브라우저들이 특정 버전들을 인식하지 못하기 때문에 이 브라우저들은 볼 수 없는 최신 스타일시트를 추가합니다.@import.
예를 들어, 이전 브라우저와 새 브라우저에서 볼 수 있는 일반 스타일시트를 추가합니다.
<link media="screen" rel="stylesheet" type="text/css" href="styles.css" />
이 CSS가 안에...
body {
font-size:13px;
}
이제 가져온 사용자 지정 시트(newbrowers.css)에서 새 브라우저에 대해서만 위의 스타일을 덮어쓰도록 새 스타일을 적용합니다.최신 브라우저는 "em" 단위를 사용하고 오래된 브라우저는 "px" 단위를 사용합니다.이 버전의@import아래는 IE 1-7, MAC IE 5, Netscape 4 등 다양한 이전 브라우저에서 볼 수 없습니다.
<link media="screen" rel="stylesheet" type="text/css" href="newerbrowsers.css" />
...이 @import inside를 사용하면 최신 브라우저만 볼 수 있습니다.'all'과 함께 이 @import 형식을 사용하면 IE1-7 브라우저 등에서 숨겨집니다!
@import 'imported.css' all;
@import에 이 CSS가 포함되어 있습니다.
html body {
font-size:1em;
}
"em" 단위를 사용하면 사용자 설정에 따라 글꼴과 디자인을 모두 확장할 수 있기 때문에 "px" 단위보다 우수한 반면, 오래된 브라우저는 픽셀 기반(단순하고 브라우저 사용자 설정에서 변경할 수 없음)에서 더 나은 성능을 발휘합니다.가져온 시트는 대부분의 이전 브라우저에서 볼 수 없습니다.
위의 것@import위에 올린 시트 규칙은 이제 아래 나열된 모든 오래된 브라우저에서 숨겨져 있습니다. 이제 개별적으로 스타일을 지정하거나 완전히 무시할 수 있으므로 팀에서 최신 HTML5 브라우저를 위해 디자인할 수 있습니다!
- Netscape 1-4.8
- Opera 1-3.5
- Windows Internet Explorer 1-7.x
- Macintosh Internet Explorer 2-4.5
- Konqueror 1-2.1
- Windows Amaya 1-5.1
- iCab 1-2
- OmniWeb
- Many more antiquated browsers...
당신은 "누가 오래된 브라우저를 신경 쓰나요!"라고 말할지도 모릅니다.수천 개의 오래된 Windows PC 또는 Mac이 있는 더 큰 구식 정부 또는 기업 네트워크로 이동해 보십시오. 그러면 여전히 오래된 브라우저들이 사용되고 있는 것을 볼 수 있을 것입니다.하지만 이것은 정말 좋은 디자인입니다. 왜냐하면 오늘날 여러분이 좋아하는 브라우저도 언젠가는 구식이 될 것이기 때문입니다.그리고 제한적인 방법으로 CSS를 사용한다는 것은 이제 사이트에서 잘 작동하지 않는 훨씬 더 크고 증가하는 사용자 에이전트 그룹이 있다는 것을 의미합니다.
사용.@import많은 브라우저가 가져온 시트를 이해하기 때문에 웹 브라우저 간 호환성이 99.99%의 긍정적인 웹 브라우저 디스플레이 포화도에 도달할 것입니다.또한 이전 브라우저의 CSS 연결 CSS를 관리하고 가져온 CSS를 사용하여 위의 내 솔루션을 사용하여 모든 최신 브라우저 스타일과 레이아웃을 관리할 수 있습니다.기존 에이전트에는 기본 CSS를 적용할 수 있지만, 최신 에이전트에는 고급 CSS3+가 제공됩니다.따라서 최신 데스크톱 브라우저에 필요한 풍부한 시각적 디스플레이를 손상시키거나 다양한 브라우저 버전에 대한 수백 개의 복잡한 CSS 해킹 및 수정 프로그램을 관리하지 않고도 이전 브라우저에서 컨텐츠에 액세스할 수 있습니다.
또한 최신 브라우저는 웹 사이트에 대한 첫 번째 호출 후 HTML 구조와 CSS를 매우 잘 캐시한다는 것을 기억하십시오.그것이 링크되고 가져온 외부 CSS를 사용하는 전체 목적입니다.통화 한 번에 캐시 한 개!게다가, 서버에 대한 여러 통화는 어쨌든 예전의 병목 현상이 아닙니다.스마트 장치에 업로드된 Javascript API와 JSON의 메가바이트 및 메가바이트와 페이지 간에 일관성이 없는 잘못 설계된 HTML 마크업이 오늘날 느린 렌더링의 주요 동인입니다.예를 들어, 많은 Google 웹 사이트 페이지에서 보기 소스를 실행하고 이와 함께 제공되는 동기화된 자바스크립트와 비동기화된 자바스크립트의 메가바이트와 메가바이트를 모두 다운로드합니다!당신의 평균 구글 뉴스 페이지는 텍스트를 아주 조금만 렌더링하는 것만으로도 ECMA스크립트가 6메가바이트를 훨씬 넘습니다! 나쁘다!!
브라우저가 외부 파일, 마크업 및 CSS를 처음 한 번 캐시하기 때문에 몇 킬로바이트의 캐시된 CSS와 더 작은 Javascript 풋프린트를 가진 일관된 깨끗한 HTML이 사용자 에이전트에서 번개 같은 속도로 렌더링됩니다.거대한 자바스크립트 서커스 트릭을 사용하여 웹사이트의 자연스러운 구문 분석 흐름을 조작하거나 변경하지 마십시오.당신이 직접 만든 작은 CSS 파일에 의존하고 @import를 사용하여 다운로드하면 당신의 사이트는 매번 완벽하게 표시될 것입니다.
그런데, 만약 당신이 크로스 브라우저 CSS를 이런 식으로 사용하는 방법의 예를 보고 싶다면, 당신은 여기에서 나의 CSS 프레임워크를 다운로드할 수 있습니다:범용 CSS 프레임워크
사용하지 않는 것이 좋습니다.@import속도를 위해 페이지에 CSS를 포함합니다.그렇지 않은 이유를 알아보려면 이 훌륭한 기사를 참조하십시오. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
또한 @import 태그를 통해 제공되는 CSS 파일을 축소하고 결합하는 것은 종종 더 어렵습니다. minify 스크립트가 다른 CSS 파일에서 @import 줄을 "빼낼" 수 없기 때문입니다.당신이 그것들을 <링크 태그>로 포함시킬 때, 당신은 기존의 미니 php/dotnet/java 모듈을 사용하여 미니화를 할 수 있습니다.
소: 사를 합니다.<link />에 @import.
링크 방법을 사용하면 스타일시트가 병렬로 로드되며(더 빠르고 더 좋음) 거의 모든 브라우저가 링크를 지원합니다.
가져오기는 추가 CSS 파일을 하나씩 로드하며(느리게) 비정형 콘텐츠의 플래시를 제공할 수 있습니다.
@네보 이즈나드 미쇼 그르구르
다음은 모두 올바른 @import 사용 방법입니다.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
출처: https://developer.mozilla.org/en-US/docs/Web/CSS/ @import
머리에 CSS 스타일시트를 추가하는 것과 가져오기 기능을 사용하는 것은 큰 차이가 없습니다.용사를 합니다.@import일반적으로 스타일시트를 쉽게 확장할 수 있도록 스타일시트를 연결하는 데 사용됩니다.예를 들어 일부 일반적인 CSS 정의와 함께 다른 색상 레이아웃을 쉽게 전환하는 데 사용할 수 있습니다.가장 큰 장점은 확장성입니다.
저는 휴대성과 유지보수성이 추가적인 이점이라는 점에서도 xbonez의 의견에 동의합니다.
http://webdesign.about.com/od/beginningcss/f/css_import_link.htm 에서 인용
@import 방법의 주요 목적은 한 페이지에 여러 개의 스타일 시트를 사용하는 것이지만 <head>에는 하나의 링크만 사용하는 것입니다.예를 들어, 회사에는 사이트의 모든 페이지에 대한 전역 스타일 시트가 있고, 하위 섹션에는 해당 하위 섹션에만 적용되는 추가 스타일이 있을 수 있습니다.하위 섹션 스타일 시트에 연결하고 해당 스타일 시트의 맨 위에 글로벌 스타일을 가져오면 사이트와 모든 하위 섹션의 모든 스타일이 포함된 거대한 스타일 시트를 유지 관리할 필요가 없습니다.유일한 요구 사항은 모든 @import 규칙이 나머지 스타일 규칙 앞에 와야 한다는 것입니다.그리고 상속은 여전히 문제가 될 수 있다는 것을 기억하세요.
여기서 핵심은 당신이 실제로 여러 개의 CSS 스타일 시트를 작성하는 두 가지 이유라고 생각합니다.
- 당신은 당신의 웹사이트의 다른 페이지들이 다른 CSS 정의를 요구하기 때문에 여러 장을 씁니다.아니면 적어도 그들 모두가 다른 페이지에서 요구하는 모든 CSS 정의를 필요로 하는 것은 아닙니다.따라서 다른 페이지에 로드되는 시트를 최적화하고 너무 많은 CSS 정의를 로드하지 않도록 CSS 파일을 분할합니다.
- 두 번째로 생각나는 이유는 당신의 CSS가 처리하기에 서투른 크기로 커졌기 때문이며, 큰 CSS 파일을 쉽게 유지하기 위해 여러 CSS 파일로 분할했습니다.
인 첫번이추가인적는입니다.<link>태그는 다른 페이지에 대해 다른 CSS 파일 세트를 로드할 수 있기 때문에 적용됩니다.
는 두번이유는입니다.@import문장은 여러 개의 CSS 파일을 얻지만 로드된 파일은 항상 동일하기 때문에 가장 편리합니다.
로딩 시간의 관점에서는 다르지 않습니다.브라우저는 어떻게 구현되든 분리된 CSS 파일을 확인하고 다운로드해야 합니다.
그들은 매우 비슷합니다.어떤 사람들은 @import가 더 유지 가능하다고 주장할 수 있습니다.그러나 @import할 때마다 "link" 방법을 사용하는 것과 동일한 방식으로 새 HTTP 요청이 발생합니다.그래서 속도의 맥락에서 그것은 더 빠르지 않습니다.그리고 "dustkwuff"가 말했듯이, 그것은 동시에 로딩되지 않으며, 이것은 붕괴입니다.
제가 @import를 사용하는 한 곳은 영어와 프랑스어 두 가지 버전의 페이지를 할 때입니다.main.css를 사용하여 제 페이지를 영어로 작성하겠습니다.프랑스어 버전을 구축할 때 프랑스어 스타일시트(main_fr.css)에 링크합니다.프랑스어 스타일시트 상단에서 main.css를 가져온 다음 프랑스어 버전에서 필요한 부분만 특정 규칙을 재정의하겠습니다.
때때로 인라인이 아닌 @import를 사용해야 합니다.32개 이상의 CSS 파일이 있는 복잡한 응용 프로그램에서 작업 중이고 IE9을 지원해야 한다면 선택의 여지가 없습니다.IE9은 첫 번째 31 이후의 CSS 파일을 무시하며, 여기에는 및 인라인 CSS가 포함됩니다.그러나 각 시트는 31개의 다른 시트를 가져올 수 있습니다.
Eric Meyer의 Reset CSS v2.0과 같은 CSS RESET을 사용하는 경우 CSS에서 @import를 사용하여 CSS를 적용하기 전에 CSS를 수행하여 충돌을 방지합니다.
여러 기기의 코드를 작성할 때는 @import가 가장 유용하다고 생각합니다.해당 장치의 스타일만 포함하는 조건문을 포함하면 한 장만 로드됩니다.링크 태그를 사용하여 공통 스타일 요소를 추가할 수 있습니다.
최신 브라우저는 CSS 파일을 사용하여 전역 변수를 정의할 수 있습니다.이 파일은 변수를 사용할 수 있는 다른 CSS 파일로 가져올 수 있습니다.
예를 들어 사이트 전체에 일관된 색상을 지정하려면 다음과 같이 하십시오.
색.색.색.색.
:root { --bg-dark: #ffffff; }가정용의
@import "colors.css"; body: var(--bg-dark)
추가할 수 있는 링크된 스타일시트의 "높은 피크"를 경험했습니다.연결된 Javascript 수를 추가하는 것은 자유 호스트 공급자에게 문제가 되지 않았지만 외부 스타일시트 수를 두 배로 늘린 후 충돌/속도 저하가 발생했습니다.올바른 코드 예제는 다음과 같습니다.
@import 'stylesheetB.css';
그래서, 저는 니트람이 언급한 것처럼, 디자인을 하드 코딩하는 동안 좋은 마인드 맵을 갖는 것이 유용하다고 생각합니다.신의 가호가 있기를.그리고 영어의 문법적인 실수에 대해 사과드립니다.
가져온 모든 CSS 파일을 개별적으로 로드하고 사이트 속도를 크게 늦출 수 있기 때문에 @import를 사용할 이유가 거의 없습니다.만약 당신이 CSS를 다루는 최적의 방법에 관심이 있다면, 당신의 모든 CSS 코드를 다루는 방법은 다음과 같습니다.
- 모든 CSS 파일을 열고 모든 파일의 코드를 복사합니다.
- 페이지의 HTML 헤더에 있는 단일 STYLE 태그 사이에 모든 코드를 붙여넣습니다.
- CSS @import 또는 별도의 CSS 파일을 사용하여 CSS를 전달하지 마십시오. 코드의 양이 많거나 특별한 필요성이 없는 한.
자세한 내용은 여기에서 확인하십시오. http://www.giftofspeed.com/optimize-css-delivery/
위의 작업이 가장 잘 되는 이유는 브라우저가 처리할 요청을 적게 생성하고 별도의 파일을 다운로드하는 대신 CSS 렌더링을 즉시 시작할 수 있기 때문입니다.
이것은 PHP 개발자에게 도움이 될 수 있습니다.다음 기능은 공백을 제거하고 주석을 제거하며 모든 CSS 파일을 연결합니다. 다음에 다음에삽다니합입그에 합니다.<style>페이지 로드 전에 머리에 태그를 입력합니다.
아래 기능은 주석을 제거하고 전달된 css를 최소화합니다.다음 기능과 함께 쌍을 이룹니다.
<?php
function minifyCSS($string)
{
// Minify CSS and strip comments
# Strips Comments
$string = preg_replace('!/\*.*?\*/!s','', $string);
$string = preg_replace('/\n\s*\n/',"\n", $string);
# Minifies
$string = preg_replace('/[\n\r \t]/',' ', $string);
$string = preg_replace('/ +/',' ', $string);
$string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);
# Remove semicolon
$string = preg_replace('/;}/','}',$string);
# Return Minified CSS
return $string;
}
?>
문서 머리 부분에서 이 함수를 호출합니다.
<?php
function concatenateCSS($cssFiles)
{
// Load all relevant css files
# concatenate all relevant css files
$css = '';
foreach ($cssFiles as $cssFile)
{
$css = $css . file_get_contents("$cssFile.css");
}
# minify all css
$css = minifyCSS($css);
echo "<style>$css</style>";
}
?>
을 합니다.concatenateCSS()문서 머리에 있습니다. IE 경로는 IE 경로입니다.css/styles.css 확을추필없다니습가요를 추가할 ..css위의 기능에 자동으로 추가되기 때문입니다.
<head>
<title></title>
<?php
$stylesheets = array(
"bootstrap/css/bootstrap.min",
"css/owl-carousel.min",
"css/style"
);
concatenateCSS( $stylesheets );
?>
</head>
언급URL : https://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import
'source' 카테고리의 다른 글
| div에 오버플로 요소가 있는지 jquery로 확인합니다. (0) | 2023.08.20 |
|---|---|
| 각도 6에서 ng add와 npm 설치의 차이 (0) | 2023.08.20 |
| SQL의 열 이름에 공백을 사용하여 테이블 만들기 (0) | 2023.08.20 |
| 중첩된 Forach-Object 및 Where-Object의 변수 (0) | 2023.08.20 |
| Oracle SQL Developer 소문자 자동 완성(대문자는 어떻습니까) (0) | 2023.08.20 |