CSS에서 @import와 링크의 차이점

118

내 프로젝트 템플릿을 조정하기 위해 CSS를 배우고 있습니다. 나는이 문제에 이르렀고 웹에서 명확한 답을 찾지 못했습니다. CSS에서 @import 또는 링크를 사용하는 데 차이가 있습니까?

@import 사용

<style>@import url(Path To stylesheet.css)</style>

링크 사용

<link rel="stylesheet" href="Path To stylesheet.css">

가장 좋은 방법은 무엇입니까? 그리고 왜? 감사!

css import hyperlink

— 오마르 아비드
소스

142

이론적으로 이들 사이의 유일한 차이점은 @import스타일 시트와 <link>HTML 메커니즘 을 포함하는 CSS 메커니즘입니다. 그러나 브라우저는 이들을 다르게 처리하므로 <link>성능 측면에서 분명한 이점을 제공 합니다.

스티브 수 더스는 모두의 영향을 비교하는 광범위한 블로그 게시물 작성 <link>및 @import"라고 (그 중 모든 종류의 조합) @import 사용하지 마십시오을 ." 그 제목은 그 자체로 거의 말해줍니다.

야후! 또한 성능 모범 사례 중 하나로 언급합니다 (Steve Souders 공동 작성) : @import보다 선택<link>

또한 <link>태그를 사용하면 "선호"및 대체 스타일 시트 를 정의 할 수 있습니다 . 당신은 그것을 할 수 없습니다 @import.

— Mercator
소스

감사합니다-멋진 하이퍼 링크-특히 첫 번째 링크입니다.

— Faisal Vali

6

import 명령을 사용하여 링크 명령으로는 불가능한 css 파일 내에서 다른 CSS를 가져올 수 있습니다. 정말 오래된 브라우저는 가져 오기 기능을 처리 할 수 없습니다 (IE4, IE5 부분). 또한 xhtml / html을 구문 분석하는 일부 라이브러리는 스타일 시트 가져 오기를 가져 오지 못할 수 있습니다. 가져 오기는 다른 모든 CSS 선언보다 먼저 와야합니다.

— 머쿠로
소스

6

오늘날 실제적인 차이 @import는 없지만 이전 브라우저 (Netscape 4 등)에서 올바르게 처리되지 않으므로 @import해킹 을 사용하여 이러한 이전 브라우저에서 CSS 2 규칙을 숨길 수 있습니다.

다시 말하지만, 정말 오래된 브라우저를 지원하지 않는 한 차이가 없습니다.

그러나 내가 당신이라면 <link>미디어 유형 (인쇄, 화면 등)과 같은 것을 지정할 수 있기 때문에 HTML 페이지 에서 변형을 사용합니다 .

— Zenazn
소스

5

미디어 지정은 @import 문에도 가능합니다.

— Georg Schölly

정말? 스타일 태그에 미디어 유형을 넣을 수 있다고 생각하지만 그것은 나에게 약간의 해킹처럼 보입니다.

— zenazn

5

예를 들어 "@import url (style.css) screen, print"를 수행 할 수 있지만 IE7 및 이전 버전은 미디어 유형을 지원하지 않습니다.

— mercator

5

@import 지시문은 브라우저 *가 가져온 스크립트가 상위 스크립트에 인라인으로로드 될 때까지 기다리도록합니다. 기술적으로는 하나의 스크립트 일 뿐이 기 때문입니다.

많은 css 최소화 스크립트 (및 less 또는 sass와 같은 언어)는 연결된 스크립트를 자동으로 메인 스크립트로 연결합니다.

* (브라우저에 따라 다름)

— 유인원
소스

2

이 기사는 여기에서 사용할 수 있습니다 : HTML에 CSS를 추가하는 4 가지 방법 : 링크, 임베드, 인라인 및 가져 오기

— 매튜 제임스 테일러
소스

1

인용문 : "1000 페이지의 웹 사이트가 있고 사이트의 모든 페이지에서 CSS 파일로 링크한다고 가정 해 봅시다. 이제 모든 페이지에 두 번째 CSS 파일을 추가한다고 가정 해 보겠습니다. 1000 개의 HTML 파일을 모두 편집하고 두 번째 CSS 링크를 추가하거나 훨씬 더 좋은 방법은 첫 번째 파일 내에서 두 번째 CSS 파일을 가져 오는 것입니다. 우리는 많은 시간을 절약했습니다! "

— Casebash

1

@import 규칙을 사용하면 일반적으로 기존 스타일 시트 내에서 스타일 시트를 가져 오는 것이 일반적입니다 (처음 시작하는 것을 싫어하지만). 그러나 귀하의 질문에 대답하기 위해, 아니오 나는 차이가 있다고 생각하지 않습니다. 유효한 XHTML을 준수하려면 URL을 큰 따옴표로 묶어야합니다.

— 배리 갤러거
소스

1

@import는 일반적으로 예제와 같이 인라인이 아닌 외부 스타일 시트에서 사용되는 것을 의미합니다. 당신이 경우 정말 아주 오래된 브라우저의 스타일 시트를 숨기고 싶어 당신은 스타일 시트를 사용하는 것을 방지하기 위해 해킹으로 그것을 사용할 수 있습니다.

전반적으로 <link>태그는 @import 규칙보다 더 빠르게 처리됩니다 (css 처리 엔진에 관한 한 다소 느림).

— 가브리엘 헐리
소스

0

Microsoft Internet Explorer 9 (MSIE9)가 @import를 제대로 처리하지 못하는 것 같습니다. 내 아파치 로그 (IP 주소가 숨겨져 있지만 whoisMicrosoft가 소유하고 있다고 표시됨) 에서 다음 항목을 확인하십시오 . screen.css에 연결된 기본 HTML

@import url("print.css") print;
@import url("speech.css") aural;

linkMSIE9가 서버에 두 개의 잘못된 요청을 발행하여 404 오류가 발생하지 않는 것처럼 보이기 때문에 HTML의 요소 로 변경하려고 합니다.

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

가 있었다 이러한 파일에 대한 적절한 요청 이후, 그러나 우리는 "첫 번째 서버에서 촬영 구문 분석이없이 할 수있는 url논리 후".

— 사일러스 S. 브라운
소스