이는 브라우저에 열려 있는 페이지에 기본적으로 적용되는 요소에 대한 자체 스타일이 이미 브라우저에 있기 때문에 발생합니다. 사실 브라우저마다 이러한 규칙이 조금씩 다릅니다. 약 10년 전만 해도 이러한 차이는 직접적으로 중요하고 매우 두드러졌습니다. 이제 그들은 최소한이지만 여전히 존재합니다.

이러한 차이점을 제거하고 페이지가 모든 브라우저에서 기본적으로 동일하게 표시되도록 하려면 특수 .css 파일(reset.css 또는 normalize.css)을 사용하십시오.

reset.css - 기능 및 사용 방법

reset.css 파일이 먼저 나타났습니다. 이 css 파일에는 가능한 모든 html 태그의 열거가 포함되어 있으며 해당 값을 0으로 재설정합니다. 즉, 가능한 모든 들여쓰기를 제거하고 모든 태그에서 글꼴을 동일하게 만들어 모든 텍스트 스타일을 재설정합니다. 따라서 모든 제목과 단락은 들여쓰기 없이 동일한 크기의 일반 텍스트로 표시됩니다. 결과적으로 모든 브라우저에서 기본 스타일이 재설정됩니다.

이렇게 작동합니다. 먼저 페이지에 reset.css 파일을 포함하고 그 다음에는 스타일이 포함된 파일을 포함합니다. 결과적으로 먼저 모든 스타일을 재설정한 다음 style.css에서만 html 태그의 디자인을 설정합니다. 이러한 방식으로 모든 브라우저가 기본 스타일을 재설정하고 모든 마크업이 style.css에서 설정한 스타일을 기반으로 합니다.

reset.css 다운로드

cssreset.com에서 reset.css를 다운로드할 수 있습니다.

또는 버전을 다운로드할 수 있습니다. 내 블로그에서 아래 버튼에 있는 Eric Meyer의 "CSS 재설정" 2.0:

normalize.css - 작동 방식과 차이점

페이지에 reset.css를 연결한 후 모든 스타일을 다시 작성해야 합니다. 그리고이 직업이 피곤할 때마다. 따라서 재설정은 다른 도구인 정규화로 대체되었습니다. Normailze - 이름에서 알 수 있듯이 모든 스타일을 재설정하지는 않지만 정규화하여 모든 브라우저에서 단일 모양으로 가져옵니다. 적용 후 제목, 글꼴 크기, 들여쓰기 등을 표시하는 기본 스타일이 통합되어 모든 브라우저에서 동일한 방식으로 표시됩니다. 그것을 사용하면 재설정의 경우 재설정 스타일을 처방하는 데 소요되는 일정 시간을 절약할 수 있습니다.

아직 normalize.css를 사용하지 않으셨다면 다음 프로젝트에서 사용해 보시는 것을 추천해 드리며, 더 이상 거절하지 못할 수도 있습니다 😉

normalize.css 다운로드

necolas.github.io/normalize.css에서 normalize.css를 다운로드할 수 있습니다.

또는 내 블로그에서 다운로드:

재설정과 정상화 중 어느 것이 더 낫습니까?

정답은 없습니다.

첫 번째는 모든 스타일을 재설정하고 두 번째는 공통 분모로 이어집니다. reset.css를 사용하는 숙련된 레이아웃 디자이너는 일반적으로 콘텐츠 스타일을 지정하기 위해 재설정 후 즉시 포함되는 자체 스타일 세트를 가지고 있습니다. 또한 새 레이아웃에서 기본 요소의 스타일을 매번 재정의할 필요가 없습니다. 나도 그래. 나는 편안하고 기본적으로 어떤 스타일을 설정하고 어떻게 작동하는지 알고 있습니다.

정규화는 구조를 연구하는 경우 편리하며 태그의 기본 모양을 사용자 정의하여 직접 수정할 수 있습니다. 그리고 그것으로 작업하는 것도 스트림에서 편리 할 것입니다-많이 자주 구성해야 할 때.

모든 도구는 훌륭합니다. 가장 중요한 것은 올바르게 사용하는 것입니다 😉

웹사이트를 배치할 때 모든 주요 브라우저에서 동일하게 이해할 수 있는 일련의 CSS 속성을 작성하는 것이 불가능한 상황이 자주 발생합니다. 그리고이 문제가 Firefox, Google Chrome, Opera 및 Safari 브라우저에서 가장 자주 발생하지 않는 경우 Internet Explorer 버전이 다른 경우 브라우저 간 레이아웃을 달성하기가 매우 어렵습니다. 따라서 이 문제를 해결하려면 특정 버전의 IE(대부분 IE6 및 IE7)에 대한 css 속성의 일부를 작성해야 합니다. 두 가지 방법이 있습니다. 첫 번째는 Internet Explorer 조건부 주석(조건부 주석)을 사용하는 것이고, 두 번째는 css 해킹(예: *margin-left:10px 또는 _margin-left:10px)을 사용하는 것입니다. 두 방법 모두 여러 가지 단점이 있지만 다행스럽게도 크로스 브라우저 CSS 파일을 만드는 데 가장 최적이라고 생각하는 또 다른 솔루션이 있습니다.

첫째, 처음 두 가지 방법의 단점에 대해 자세히 설명합니다. 조건부 주석을 사용하는 경우 Internet Explorer 버전에 따라 추가 스타일이 포함된 별도의 css 파일을 로드합니다. 예를 들면 다음과 같습니다.

이 방법의 단점은 다음과 같습니다.

• Internet Explorer의 다른 버전에 대한 스타일이 있는 파일을 로드하라는 추가 http 요청을 받습니다. 이는 페이지 로드 시간에 부정적인 영향을 미칩니다.
• 스타일은 서로 다른 파일로 분할되어 사이트 레이아웃 작업을 하는 동안 스타일을 찾기가 매우 어렵습니다. 지옥 , IE에 대한 이것 또는 저 스타일이 로드됩니다).

또한 두 번째 단점이 매우 중요하다고 생각합니다. 그리고 이와 관련하여 IE용 css 핵을 사용하는 것조차 크로스 브라우저 레이아웃을 달성하는 더 좋은 방법인 것 같습니다. 그러나 css 해킹에도 단점이 있습니다. 사용되는 사이트는 유효성 검사를 통과하지 못합니다. 웹 페이지 유효성 검사가 중요하지 않은 경우 해킹을 사용할 수 있지만 위에서 설명한 단점이 없는 처음 두 가지보다 더 우아한 솔루션이 있습니다. 이를 통해 유효성 검사를 성공적으로 통과하는 하나의 파일에 모든 스타일을 작성할 수 있습니다. 이 방법은 Paul Irish의 웹사이트에 설명되어 있습니다. 그 본질은 조건부 주석의 도움으로 추가 css 파일을 로드하지 않고 단순히 태그에 대한 특수 클래스를 설정한다는 사실에 있습니다. , Modernizr js 라이브러리가 클래스를 노출하는 방식과 유사합니다.

여는 태그 코드 이므로 다음과 같이 표시됩니다.

그건 그렇고, 내 블로그에서는 이 특정 크로스 브라우저 레이아웃 방법을 사용하여 IE6 및 IE7 브라우저에서 사이트 페이지가 다른 브라우저와 동일한 방식으로 표시되도록 합니다.

독자 여러분 안녕하세요!

우리 모두는 스타일이 다른 브라우저에서 올바르게 표시되기를 원합니다. 그러나 다른 브라우저에서 작동하려면 스타일을 추가해야 합니다. 이 프로세스를 사이트 레이아웃 가져오기라고 합니다. 크로스 브라우저 보기. 브라우저 간 호환성은 css 스타일이 다른 브라우저와 다른 버전에서 올바르게 표시되는 경우입니다.

나는 당신을 데려 오는 과정에 몇 가지 팁을주고 싶습니다 CSS 브라우저 간 호환성 시간이 덜 걸렸다.

1. 가장 인기 있는 브라우저에 집중하세요. 브라우저 등급은 웹에서 찾을 수 있습니다. 사이트 청중의 지역도 고려할 가치가 있습니다. 예를 들어 이것이 아프리카 사용자를 위한 사이트라면 Chrome이 아니라 다른 브라우저가 이미 여기에서 우세합니다. 또한 레이아웃 프로세스 중에 2위와 3위를 차지하는 브라우저에서 사이트가 어떻게 보이는지 살펴볼 가치가 있습니다.

2. 가장 인기 있는 상품을 검색할 수 있습니다. CSS 스타일, 다른 브라우저에서는 제대로 보이지 않습니다. 그들을 위한 CSS 해킹을 찾으십시오.

3. 네트워크에 생성할 수 있는 특수 도구가 있습니다. 크로스 브라우저 스타일. 제 생각에는 가장 흥미로운 두 가지를 강조하고 싶습니다.

크로스 브라우저 CSS용 도구.

• 많은 스타일이 설명되었습니다.
• 결과를 사용한 사용 예가 있습니다.

• 처음에는 사이트를 탐색하기가 어렵습니다.
• 자체 매개변수로 스타일을 생성하는 것은 불가능합니다(사용 예가 제공됨).

CSS3 생성기

• 조작이 편리하고 직관적입니다.
• 매개변수에 대한 스타일을 생성할 수 있습니다.
• 생성된 스타일의 결과를 확인할 수 있습니다.

• 몇 가지 스타일

우리는 "소셜 미디어 콘텐츠 마케팅: 구독자의 머리 속으로 들어가 브랜드와 사랑에 빠지게 만드는 방법"이라는 새로운 책을 출간했습니다.

브라우저 간 호환성 - 웹 리소스가 여러 브라우저에 적응하고 올바르게 표시되는 기능입니다.

우리 채널의 더 많은 비디오 - SEMANTICA로 인터넷 마케팅 배우기

예를 들어 온라인 상점을 위한 웹사이트를 만들었습니다. 눈을 즐겁게 하는 아름다운 디자인을 개발했습니다. 그러나 사용자는 다른 브라우저를 통해 사이트에 액세스합니다. 일부는 스마트폰을 사용하기도 합니다. 그리고 리소스의 브라우저 간 호환성을 확인하지 않은 경우 일부 브라우저에서 사이트가 제대로 표시되지 않을 수 있습니다.

요소가 이동하고 그림이 표시되지 않을 수 있으며 글꼴이 보기 흉해집니다. 사람은 그러한 서비스를 사용하지 않습니다. 그는 더 멀리 갈 것입니다.

사이트 개발자의 임무는 브라우저와 장치에 관계없이 리소스가 올바르게 표시되도록 만드는 것입니다.

브라우저 간 레이아웃

브라우저 간에 경쟁이 있습니다. 과거에는 모두가 뛰어난 기능과 ​​옵션을 추가하려고 했습니다. 결과적으로 HTML 표준은 더 이상 존중되지 않았고 각 브라우저는 페이지를 다르게 렌더링했습니다.

넷스케이프 내비게이터는 인터넷 익스플로러 독점권을 내주면서 경주에서 탈락했습니다. 거의 동시에 Mozilla Firefox(Gecko), Google Chrome(Blink), Opera(WebKit) 및 Safari(WebKit) 프로젝트가 추진력을 얻기 시작하여 시장을 서로 나누고 커뮤니티가 브라우저 간 호환성 문제에 대해 생각하도록 강요했습니다. 그들의 사이트의.

작성자:사람들은 다양한 브라우저를 사용하여 웹을 탐색합니다. 물론 Chrome과 같이 가장 많이 사용되는 것이 있습니다. 덜 사용되는 것(Safari, Internet Explorer)도 있지만 사람들을 위한 사이트를 만들고 있다면 브라우저 간 호환성(만드는 방법과 모든 것)에 대해 알아야 합니다. 모든 주요 브라우저에서 사이트를 동일하게 표시하는 방법을 살펴보겠습니다.

브라우저 간 호환성의 주요 목표는 다른 웹 브라우저에서 사이트 디자인의 중요한 변경을 방지하는 것입니다. 차이점이 세부 사항에만 있고 이것이 사이트의 전반적인 인식에 영향을 미치지 않는 경우 브라우저 간 호환성 문제에 대처했다고 말할 수 있습니다. 그러나 여전히 이것에 대해 어떤 진정한 조언을 줄 수 있습니까?

브라우저 간 호환성을 달성하는 방법

현재 사이트를 최적화해야 하는 가장 인기 있는 브라우저는 5가지입니다. 그리고 일반적으로 최신 버전의 웹 브라우저와 친구를 사귀는 것이 쉽다면 이전 버전일수록 더 많은 문제가 있을 수 있습니다.

예를 들어 IE6은 새로운 html 태그와 css 속성을 지원하는 측면에서 가장 문제가 많은 브라우저 중 하나입니다. 그러나 오늘날 일부는 여전히 이 브라우저에서 사이트의 정상적인 표시를 요구합니다. 나에 관해서는 이것은 이미 너무 많습니다. IE8 지원이면 충분합니다.

그러나 이것은 작은 여담입니다. 이제 브라우저 간 호환 사이트를 만드는 데 도움이 되는 실제 단계를 살펴보겠습니다.

기성품 솔루션을 최대한 활용하십시오. 새로운 기능을 구현하고 이전 브라우저가 이를 이해하도록 가르치려면 자바스크립트 라이브러리가 필요합니다. 그들 없이는이 경우 아무데도 없습니다. jQuery를 설치해야 합니다.

Modernizr라는 멋진 자바스크립트 라이브러리가 있습니다. 해당 기능을 사용하면 지원되지 않는 속성에 대한 대안을 구현할 수 있습니다. 그것이 내가 당신이 사용하는 것이 좋습니다.

따라서 먼저 공식 웹 사이트로 이동해야 합니다. https://modernizr.com/download. 여기에서 사이트에서 사용할 기술을 선택해야 합니다. 목록이 상당히 길고 최신 웹 표준과 영어에 대한 평균적인 지식이 없으면 거의 알아낼 수 없습니다. 어쨌든 직관적인 속성도 있습니다. 모든 것을 체크하더라도 결과 코드는 너무 번거롭지 않을 것입니다.

쌀. 1. 도서관이 확인할 기술의 선택.

라이브러리 확인

사용자 지정 버전의 라이브러리를 다운로드한 후 작동을 확인해야 합니다. 파일 경로를 지정하는 스크립트 태그를 사용하여 연결해야 합니다. 모든 것이 정확하다면 html 태그에 많은 새로운 스타일 클래스가 있어야 합니다. 이 클래스는 선택한 기술의 이름을 따서 명명됩니다.

>p?따라서 이러한 클래스가 html 태그에 지정되어 있으면 이 기술이 이 브라우저에서 작동합니다. 지원되지 않는 항목이 있으면 "기술 이름 없음" 클래스가 등록됩니다. 지금 바로 예를 들어 보겠습니다.

예를 들어 box-shadow 속성을 확인해야 합니다. 참고로 요소에 그림자를 설정합니다. 브라우저에서 지원하는 경우 이 스타일 클래스가 html 태그에 나타납니다. 웹 브라우저가 속성을 인식하지 못하면 "no-boxshadow" 클래스가 나타납니다.

쌀. 2. html 태그에서 많은 클래스를 볼 수 있습니다. 이 경우 브라우저가 거의 모든 기술을 지원한다는 것을 알 수 있습니다.

이제 브라우저 간 호환성 관리는 전적으로 귀하의 손에 달려 있습니다. no-boxshadow 클래스에 몇 가지 대체 속성을 설정하는 것으로 충분하며, box-shadow 속성을 지원하지 않는 모든 브라우저에서는 이 규칙이 대신 적용됩니다. 매우 편안합니다.

habrahabr에서 여기에서 제공하고 싶은 또 다른 예를 찾았습니다. 라이브러리를 사용하여 이전 브라우저에서 대안을 구현하는 방법에 대한 예가 있었습니다.

Multiplebgs 선택기( background-image: url("image.png") 중심 40px no-repeat, url("image2.png"); ) .no-multiplebgs 선택기( background-image: url("image.png") 중심 40px no-repeat lightgray; )

예시 설명. 우리는 오랫동안 CSS3에서 지원해 온 다중 배경 기술에 관심이 있습니다. 이렇게 하려면 그림의 주소와 해당 매개 변수를 쉼표로 구분하여 나열하는 것으로 충분합니다. 당연히 이전 브라우저는 이를 지원하지 않으므로 .no-multiplebgs 클래스를 사용하여 자체 스타일을 작성합니다. 브라우저가 다중 배경을 지원하지 않는 경우 스타일이 적용되도록 지정합니다.

따라서 이 선택기에 대해 다른 스타일을 설정할 수 있으므로 모든 웹 브라우저에서 사이트를 아름답게 표시할 수 있습니다. 물론 Modernizr의 가능성을 충분히 경험하기 위해서는 웹 프로그래밍과 웹사이트 레이아웃에 정통해야 합니다. 숙련된 사람은 지원이 매우 부족한 속성을 대체할 수 있는 속성을 결정할 수 있습니다.

물론 라이브러리의 기능은 훨씬 더 넓습니다. 마지막에 결과에 대한 다양한 기술 및 체인 이벤트에 대한 지원을 테스트할 수 있습니다. 예.