it-gundan.com

크로스 브라우저 CSS를 구현하는 가장 좋은 방법은 무엇입니까?

크로스 브라우저 CSS를 구현하는 가장 좋은 방법은 무엇입니까?

규칙 : 답변에 대한 한 가지 접근 방식.

4
stacker

조건부 주석 을 사용하여 Internet Explorer 관련 문제를 해결할 수 있습니다. 그 외에도 Firefox/Chrome/Opera를 서로 별도로 타겟팅 할 필요는 없으며 표준을 모두 지원합니다.

캐싱은 들어 가지 않아야합니다. 모든 브라우저에서 동일한 코드를 제공해야합니다.

4
DisgruntledGoat

가장 쉬운 방법은 라이브러리를 사용하는 것입니다. OOCSS, Blueprint 또는 960gs와 같은 라이브러리는 이미 주요 브라우저에서 디스플레이를 복제하도록 설계되었습니다. 그 후 남은 일은 대부분 사용자 정의 스타일이 브라우저 간 호환 가능하고 마크 업으로 인해 문제가 발생하지 않는 것입니다.

가능하다면 전염병과 같은 해킹을 피하십시오 (예, 조건부 사용).

2
Kenneth Love

이와 같은 질문과 답변을 읽을 때 나는 미쳤다고 생각하기 시작하지만 css3 및 기타 까다로운 것을 포함하여 상당히 많은 CSS를 사용하여 상당히 복잡한 웹 사이트를 작성했으며 조건부 의견조차도 사용하지 않았습니다.

그러나 코딩하는 동안 여러 브라우저 (주로 Chrome에서 코딩하고 firefox 및 ie7에서 테스트)에 대한 작업을 지속적으로 확인합니다. 문제가 발생하면 한 걸음 물러서서 사물이 다르게 렌더링되는 이유를 파악하고 종종 약간 다른 접근법을 선택합니다.

즉, 나는이 다른 핵과 방법에 대한 지적 관심이 있습니다. 특히 CSS3 PIE와 modernizr에서 사용하는 기술에 대해 읽는 것이 좋습니다.

크로스 브라우저 코딩에 접근하는 가장 좋은 방법은 서로 다른 브라우저가 코드를 해석하는 다른 방법을 인식하고 도움을 줄 수는 없지만 올바르게 작성하는 방식으로 코드를 작성하는 것입니다.

1
Zach Lysobey

웹 표준으로 디자인 및 개발
문서 및 스타일 시트를 지속적으로 확인하십시오!
매일 브라우저 간/플랫폼 테스트!
최소한 풀 요청을 제출하거나 저장소에 커밋하기 전에.

어쨌든 적합한 문서를 작성해야하지만 이는 브라우저 간/플랫폼 CSS를 작성하는 데 중요합니다.

참고 : 검증의 진정한 힘은 시간의 100 %를 준수하지 않습니다. 검증 할 필요가없는 것을 이해하고, 연기 할 수 있으며, 즉시 수정해야하는 것을 이해하면 초능력을 얻게됩니다.
그리고 그 강점 : 지속적인 검증은 사양의 규칙을 강화하고, 당신은 정통합니다. 지속적으로 브라우저 간/플랫폼 간 테스트를 수행하면 가장 많은 브라우저의 사용자 에이전트 스타일 시트를 계속 확인할 수 있습니다. 자신의 스타일을 그대로 따르면 문제가 훨씬 줄어 듭니다.

원하는 경우 라이브러리와 프레임 워크를 사용할 수 있지만 워크 플로우에서 발생하는 모든 상처와 고통을 추상화하고 요청한 스타일에 대해 세밀한 시각을 가지지 않습니다. 그러나 libs/frameworks는 일반적으로 페이지 부풀림과 함께 제공되지만 강력한 기능을 제공합니다.

reset.css, normalizr.css 및 심지어 *{border:none; margin:0; padding:0) 재설정은 브라우저에서 스타일을 변경하는 브라우저 사이 또는 자신 만의 스타일을 유지하기 위해 무기고의 무기입니다.

예, 다른 두 가지 옵션과 함께 * "hack"을 추천했습니다. 사용자 에이전트와 전투를 할 때 각자 고유의 위치를 ​​차지합니다.

또한, 상기 결함은 100 % 연속성을 나타내지 않으며 처리 될 필요가 있기 때문에 특정 사용자 에이전트의 결함을 이용하지 않는 것은 터무니없는 일이다. 그렇게함으로써, 결함 자체는 특징 탐지 또는 스니핑 냄새까지 완벽한 훅을 제공하여 적절히 처리 될 수 있습니다!

모든 해킹, 결함, 기능, 비 기능을 사용하여 돔을 구부리고 브라우저를 인라인으로 강제 설정할 수 있습니다.

...... 필요한 경우. 그러나 웹 표준을 사용하여 개발하는 경우 과거만큼 많이 필요하지 않을 것입니다.

그리고 당신이 그것들에 덜 의존하고 있기 때문에, 당신이 문제를 해결하기 위해 하나를 사용할 기회를 얻었을 때, 그것을 빨리 사용하십시오! 문제가 무엇인지 이미 알고 있으며 문제를 해결하는 솔루션도 있습니다.

각 브라우저에는 독자적으로 대상을 지정하는 방법이 있으며 가장 확실한 조건부 주석이 있습니다.
ie6-9에 조건부 주석을 사용하고, 조건부 컴파일을 사용하여 ie10 및 ie11에 대한 스타일을 렌더링하십시오.
다시 말하지만, 여러분이 dwws와 dvwws라면, 당신이 만드는 모든 문서에 그것들을 포함시킬 수 있지만, 스타일 시트가 불규칙하다는 것을 알 수 있습니다. -100 % 등을 늘리기위한 색상.

1
albert

내가하는 일은 재설정 CSS를 사용한 다음 조건문을 사용하는 것입니다. CSS 재설정은 거의 모든 문제를 해결하고 조건부로 IE의 모든 문제를 해결합니다. 다른 브라우저간에 차이가있는 경우 일반적으로 모든 브라우저의 너비를 늘리거나 글꼴 크기를 늘리는 등의 문제를 해결하려고합니다.

개인적으로 YUI 재설정 CSS를 사용합니다.

0
Darryl Hein

CSS3 PIE CSS3 호환성 레이어로 매우 유망 해 보입니다. 물론 이전 CSS 버전에 대한 다른 브라우저 간 우려가 있습니다.

IE6에 관한 관련 질문, 유용한 정보가 많이 있습니다 : IE6 지원을 귀찮게해야합니까?

0
JasonBirch

CSS 해킹 사용에 대한 경고와 함께 이것을 예방합니다.

순수한 성능 관점에서 볼 때, 클라이언트의 단일 HTTP 요청에 한 번만 응답하는 것 외에 다른 이유로 캐싱은 단일 파일로 더 효과적입니다. 브라우저에 관계없이 모든 사용자에게 동일한 파일을 제공하는 것 외에도 상황에 따라 조건부 주석 차단 다운로드 가 있습니다.

하나의 파일로 모든 다른 Internet Explorer 버전을 대상으로하기 위해 다양한 CSS 해킹이 있습니다. 이것들은 CSS를 무효로 만듭니다 (유효성 검사가 문제가되는 경우).

본문 {
 색상 : 빨간색;/* 모든 브라우저 */
 색상 : 녹색\9;/* IE8 이하 */
 * color : 노랑;/* IE7 이하 */
 _color : 주황색;/* IE6 */
}

조건부 주석 차단은 ​​조건부 주석이있을 때 IE8의 some 경우에만 문제가됩니다. Internet Explorer 지원에 대한 의견에 따라 이는 문제가 될 수도 있고 아닐 수도 있습니다.

나는 개인적으로 조건부 주석을 사용합니다. 나는 개인적으로 CSS 해킹이 끔찍하다고 생각하며 조건부 의견에서 실제 또는 상상되는 성능 적중은 CSS 해킹이 종종 발생하는 문제의 가치 라고 생각합니다.

조건부 주석은 비교적 구현하기 쉽고 Quirksmode에서의 사용에 대해 great article 이 있습니다. 다음은 IE6 만 다룰 것입니다.

<!-[if IE 6]> 
 <link rel = "stylesheet"type = "text/css"href = "/ media/css/ie6.css"/> 
 <! [endif]->

주어진 버전 번호와 같거나 적거나 크거나 작거나 같거나 크거나 같은 Internet Explorer를 대상으로 지정할 수있는 구문이 있습니다. 위의 예는 다음 중 하나입니다.

0
Bryson