CSS 대 선택기를 덮어 쓰는 방법 (YepNope)

테스트 방법은 확실하지 않지만 Modernizer.load가 포함 된 쿼리를 통해 CSS 스타일 시트를로드하면 성능이 향상됩니다. 반대쪽에는 Modernize.load를 사용하여 CSS 클래스 이름으로 규칙을 덮어 씁니다. 같은 스타일 시트.CSS 대 선택기를 덮어 쓰는 방법 (YepNope)

... 장치가 다음 터치 지원이있는 경우 예를 들어, 나는 ... 더 빨리 할 것입니다,

{ 
    test: Modernizr.touch, 
    yep : 'css/touch.css', 
    nope: 'css/base.css' 
}

를로드하는 다른 레이아웃을 가지고 또는 같은 스타일 시트의 스타일을 덮어

.container { width: 50% } 

.touch .container { width: 100% }

차이점은 추가 쿼리의 속도와 비교하여 하나의 큰 CSS 파일을 갖는 것의 무게입니까?

출처

2013-02-14 Dan Christian

터치 CSS가 얼마나 있습니까? –

글쎄 그것은 이론적 인 생각이지만, 둘 다 논쟁을 위해 같은 무게를 지녔다고 생각해. –

약간 곁에 :'Modernizr.touch' **는 * 장치 *가 터치 가능 여부를 테스트하지 않습니다. 단지 * 브라우저 *가 [Touch Events] (http://www.w3.org/TR/2013/WD-touch-events-20130124 /) ... 조심하십시오 ([ref] (http://modernizr.com/docs/#touchnotes)). 'Modernizr.touch'는 IE10에서 Touch Events 사양을 따르지 않으므로 모든 장치에서 false입니다. 대신 [Pointer Events] (http://www.w3.org/Submission/pointer-events/)를 사용합니다. . 실제로'Modernizr.touch'는'Modernizr.touchevents'와'Modernizr.pointerevents'에 찬성하여 v3.0에서 폐지되고 있습니다. –

여기에 3 가지 세부 정보가 있음을 이해해야합니다.

서버 호출.
브라우저 시간은 파일의 모든 부모 스타일의
무게를 계산합니다.

그래서 대답은.

줄 바꿈없이 CSS를 쓰면 큰 파일 1 개가 2 개 파일보다 커집니다. 무게에 대한 답은 원인 1 파일이 더 좋습니다.

전체 페이지를 만들려면 .touch 클래스가 더 많은 파일을 클래스와 함께 계산됩니다.

그래서, 내가 뭘하고있어 곧

출처

2013-02-14 16:53:51

I 될 것입니다 서버 한 시간에 전화를 하나의 파일 원인은 모든 스타일의 함께 서버 (중요한 시간 값)에 대한 호출을로드하는 것이 좋습니다 수 있도록하는 것입니다 두 옵션 모두 완벽하게 유효하다고 생각합니다.

터치에 고유 한 많은 CSS 코드가 있다면 비접촉식 브라우저에 추가 부담을주지 않기 위해 Modernizr로 가져옵니다.

그러나 일반적으로이 유형의 우선 적용 스타일을 사용하는 것이 좋습니다.

Modernizr 옵션을 사용하면 Modernizr 스크립트가로드되어 실행할 준비가 될 때까지 Modernizr 테스트를 수행 할 수 없으므로 터치 스타일로드가 지연됩니다.

메인 페이지로드의 일부로로드되고 초기 렌더링을 위해 준비되는 것과 비교하면 페이지로드 이후에만로드되며 곧바로 준비되지 않을 수 있습니다.

결과는 터치 스타일이로드되기 전에 페이지가로드되어 표시 될 수 있다는 것입니다. 이상적이지 않습니다.

이것은 Modernizr을 노크하는 것이 아닙니다. 이것은 훌륭한 도구입니다. 그러나 사용하지 않고 필요한 것을 할 수 있다면 일반적으로 더 좋습니다.

출처

2013-02-15 08:00:00 Spudley

CSS 대 선택기를 덮어 쓰는 방법 (YepNope)

답변

관련 문제