내 프로젝트 템플릿을 조정하기 위해 CSS를 배우고 있습니다. 나는이 문제에 이르렀고 웹에서 명확한 답을 찾지 못했습니다. CSS에서 @import 또는 링크를 사용하는 데 차이가 있습니까?
@import 사용
<style>@import url(Path To stylesheet.css)</style>링크 사용
<link rel="stylesheet" href="Path To stylesheet.css">가장 좋은 방법은 무엇입니까? 그리고 왜? 감사!
답변
이론적으로 이들 사이의 유일한 차이점은 @import스타일 시트와 <link>HTML 메커니즘 을 포함하는 CSS 메커니즘입니다. 그러나 브라우저는 이들을 다르게 처리하므로 <link>성능 측면에서 분명한 이점을 제공 합니다.
스티브 수 더스는 모두의 영향을 비교하는 광범위한 블로그 게시물 작성 <link>및 @import“라고 (그 중 모든 종류의 조합) @import 사용하지 마십시오을 .” 그 제목은 그 자체로 거의 말해줍니다.
야후! 또한 성능 모범 사례 중 하나로 언급합니다 (Steve Souders 공동 작성) : @import보다 선택<link>
또한 <link>태그를 사용하면 “선호”및 대체 스타일 시트 를 정의 할 수 있습니다 . 당신은 그것을 할 수 없습니다 @import.
답변
import 명령을 사용하여 링크 명령으로는 불가능한 css 파일 내에서 다른 CSS를 가져올 수 있습니다. 정말 오래된 브라우저는 가져 오기 기능을 처리 할 수 없습니다 (IE4, IE5 부분). 또한 xhtml / html을 구문 분석하는 일부 라이브러리는 스타일 시트 가져 오기를 가져 오지 못할 수 있습니다. 가져 오기는 다른 모든 CSS 선언보다 먼저 와야합니다.
답변
오늘날 실제적인 차이 @import는 없지만 이전 브라우저 (Netscape 4 등)에서 올바르게 처리되지 않으므로 @import해킹 을 사용하여 이러한 이전 브라우저에서 CSS 2 규칙을 숨길 수 있습니다.
다시 말하지만, 정말 오래된 브라우저를 지원하지 않는 한 차이가 없습니다.
그러나 내가 당신이라면 <link>미디어 유형 (인쇄, 화면 등)과 같은 것을 지정할 수 있기 때문에 HTML 페이지 에서 변형을 사용합니다 .
답변
<link> 지시문을 사용하면 여러 CSS를로드하고 비동기 적으로 해석 할 수 있습니다.
@import 지시문은 브라우저 *가 가져온 스크립트가 상위 스크립트에 인라인으로로드 될 때까지 기다리도록합니다. 기술적으로는 하나의 스크립트 일 뿐이 기 때문입니다.
많은 css 최소화 스크립트 (및 less 또는 sass와 같은 언어)는 연결된 스크립트를 자동으로 메인 스크립트로 연결합니다.
* (브라우저에 따라 다름)
답변
이 기사는 여기에서 사용할 수 있습니다 : HTML에 CSS를 추가하는 4 가지 방법 : 링크, 임베드, 인라인 및 가져 오기
답변
@import 규칙을 사용하면 일반적으로 기존 스타일 시트 내에서 스타일 시트를 가져 오는 것이 일반적입니다 (처음 시작하는 것을 싫어하지만). 그러나 귀하의 질문에 대답하기 위해, 아니오 나는 차이가 있다고 생각하지 않습니다. 유효한 XHTML을 준수하려면 URL을 큰 따옴표로 묶어야합니다.
답변
@import는 일반적으로 예제와 같이 인라인이 아닌 외부 스타일 시트에서 사용되는 것을 의미합니다. 당신이 경우 정말 아주 오래된 브라우저의 스타일 시트를 숨기고 싶어 당신은 스타일 시트를 사용하는 것을 방지하기 위해 해킹으로 그것을 사용할 수 있습니다.
전반적으로 <link>태그는 @import 규칙보다 더 빠르게 처리됩니다 (css 처리 엔진에 관한 한 다소 느림).
