Computer >> 컴퓨터 >  >> 소프트웨어 >> 브라우저

브라우저 간 호환성 보장:모든 브라우저에서 원활하게 작동하는 웹 사이트 구축

브라우저 간 호환성 보장:모든 브라우저에서 원활하게 작동하는 웹 사이트 구축

웹용으로 구축할 때 터널 비전을 개발하기 쉽고 자신만을 위해 구축하는 것이 쉽습니다. 청중의 다양한 요구 사항을 간과하고 선호 사항과 선호하는 브라우저에서 사물이 어떻게 보이는지에만 집중할 수 있습니다. 이로 인해 중요한 기능 측면을 놓치게 되고 향후 다른 브라우저에서 호환성 문제가 발생할 수 있습니다.

이 기사에서는 양식 요소, 스크롤 막대, 글꼴과 같은 특정 UI 구성 요소에 초점을 맞춰 브라우저 간 호환성을 달성하기 위한 실용적인 전략을 살펴보겠습니다. 그런 다음 모든 웹 개발자가 채택해야 하는 몇 가지 일반적인 모범 사례에 대해 논의하겠습니다.

"귀하가 귀하의 사용자가 아니라는 점을 기억하십시오. 귀하의 사이트가 MacBook Pro 또는 고급 Galaxy Nexus에서 작동한다고 해서 모든 사용자에게 작동한다는 의미는 아닙니다!" – MDN 웹 문서

목차

  • 브라우저 간 호환성이란 무엇입니까?
  • 일반적인 브라우저 간 문제 및 해결 방법
  • 브라우저 간 호환성 모범 사례
  • 결론

간단히 말해서 브라우저 간 호환성은 브라우저 선택에 관계없이 웹 사이트가 모든 사용자에게 일관되고 최고의 경험을 제공하도록 보장하는 것입니다.

브라우저는 서로 다른 엔진을 사용하므로 기본적으로 웹사이트를 다르게 렌더링합니다. 사용자의 브라우저에 관계없이 웹사이트가 동일하게 보이고 작동하도록 하려면 고유한 브라우저 기능을 이해해야 합니다.

브라우저 간 호환성은 이상적으로 웹 사이트가 Chrome, Microsoft Edge 및 Opera(Blink 엔진 기반), Firefox(Gecko 엔진 기반) 또는 심지어 Safari(WebKit 엔진 기반)에서 보든 동일하게 보이고 작동해야 함을 의미합니다.

브라우저 간 호환성의 이점:

  1. 더 넓은 도달 범위 – 사용하는 브라우저에 관계없이 더 많은 사용자가 웹사이트에 액세스할 수 있습니다.
  2. 일관적인 사용자 경험 – 귀하의 웹사이트는 플랫폼 전반에 걸쳐 통일된 모양과 기능을 가지고 있습니다.
  3. 더 나은 검색 엔진 최적화(SEO) – 귀하의 웹사이트는 사용자 친화적이기 때문에 더 높은 순위를 얻을 수 있습니다.

일반적인 브라우저 간 문제 및 해결 방법

브라우저 간 호환성 보장:모든 브라우저에서 원활하게 작동하는 웹 사이트 구축 다양한 브라우저에서의 웹페이지 테스트 결과를 보여주는 인포그래픽. 이미지 크레딧 브라우저스택

양식 요소

<input>과 같은 양식 요소의 모양과 동작 , <select> , <textarea> 및 <button> 브라우저마다 크게 다를 수 있습니다. 이는 사용자가 양식과 상호 작용하는 방식(예:클릭, 초점 맞추기, 입력)을 포함하여 양식의 시각적 측면과 유용성 모두에 영향을 미칩니다.

예를 들어 <input>의 자리 표시자 텍스트입니다. 필드는 한 브라우저에서는 더 희미하게 나타나고 다른 브라우저에서는 더 뚜렷하게 나타나 가독성 문제가 발생할 수 있습니다.

이 문제를 해결하려면:

  • CSS를 사용하여 양식 요소의 모양을 최대한 표준화하세요.
  • 자리표시자의 경우 브라우저 전반에 걸쳐 대비와 가독성을 보장하세요.
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
 color: #909090;
 opacity: 1; /* Firefox */
}
input.studentid:-ms-input-placeholder { /* Microsoft Edge */
 color: #909090;
}

위의 CSS 코드는 브라우저 전체의 입력 필드에 있는 자리 표시자 텍스트를 대상으로 하며 해당 색상을 #909090으로 설정하고 일관된 가시성을 위해 완전한 불투명도를 보장합니다(Microsoft Edge에 대한 특정 규칙 사용).

글꼴

글꼴과 타이포그래피는 다양한 기본 글꼴 크기부터 글꼴 렌더링 엔진의 차이까지 여러 브라우저 간 호환성 문제에 직면해 있습니다. 이는 텍스트의 두께, 간격 및 전체적인 모양에 영향을 미칠 수 있습니다.

Chrome에서는 Edge에 비해 글꼴이 더 얇고 간격이 더 넓어져 가독성과 디자인 일관성에 영향을 줄 수 있습니다.

이 문제를 해결하려면:

  • CSS에서 기본 글꼴 크기를 정의하고 상대 단위(예:em)를 사용합니다. 또는 rem ) 아래 코드에 표시된 대로 텍스트 크기를 조정합니다. 이는 확장성과 일관성을 유지하는 데 도움이 됩니다.
html {
 font-size: 16px; /* Define a base font size */
}
body {
 font-family: 'Open Sans', sans-serif;
 line-height: 1.6;
 color: #333;
}
h1, h2, h3, p {
 margin: 2rem;;
 padding: 1.5rem;
}
  • 웹 글꼴을 사용할 때 브라우저 간 호환 가능한 글꼴 로딩을 제공하는 Google Fonts와 같은 서비스를 사용하여 모든 브라우저에서 올바르게 로드되는지 확인하세요.
<link href="<https://fonts.googleapis.com/css?family=Open+Sans&display=swap>" rel="stylesheet">
  • 아래 코드는 'Open Sans' 글꼴이 브라우저에 관계없이 웹사이트에서 동일하게 보이는지 확인합니다. 먼저 컴퓨터에 이미 있을 수 있는 글꼴 버전을 사용하여 작업을 더 빠르게 로드합니다. 그렇지 않으면 인터넷에서 해당 글꼴을 가져오지만 기본 글꼴이 로드되기를 기다리는 동안 기본 글꼴로 교체합니다. 
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: local('Open Sans Regular'), local('OpenSans-Regular'), url(<https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2>) format('woff2');
}

스크롤바

스크롤바 스타일은 여러 브라우저에서 일관되지 않은 지원으로 인해 오랫동안 웹 개발자에게 어려운 과제였습니다. Chrome, Safari, Edge와 같은 브라우저에서는 CSS를 사용하여 스크롤 막대를 맞춤설정하는 방법을 제공했지만 지원 수준과 구현 방법은 다양합니다.

최근 업데이트에서는 스크롤바 사용자 정의 표준화가 개선되었으며 대부분의 최신 브라우저는 유사한 기능을 채택했습니다. 하지만 접근 방식에는 여전히 몇 가지 차이점이 있습니다.

Chrome, Edge 및 Firefox의 경우 , CSS scrollbar-width를 사용할 수 있습니다 그리고 scrollbar-color 스크롤바의 모양을 사용자 정의하는 속성입니다. 이는 이를 지원하는 브라우저 전반에 걸쳐 스크롤 막대 스타일을 보다 일관되게 제공하는 것을 목표로 하는 새로운 표준의 일부입니다.

/* For Chrome, Firefox, and Edge */
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f0f0f0;

Safari의 경우 WebKit 렌더링 엔진을 사용하는 경우 ::-webkit-scrollbar을 사용해야 합니다. 유사한 스타일을 달성하기 위한 의사 요소입니다. 이 방법은 WebKit 기반 브라우저에만 해당됩니다.

/* For Safari */
.mostly-customized-scrollbar::-webkit-scrollbar {
 width: 5px;
 height: 8px;
 background-color: #aaa; /* or add it to the track */
}

위의 CSS 코드는 크기와 색상을 조정하여 해당 브라우저에서 스크롤바의 모양을 맞춤설정합니다.

그러나 모든 브라우저에서 일관성을 유지하려면 기본 스크롤 막대 모양이 디자인에 부정적인 영향을 미치지 않는 방식으로 웹페이지를 디자인해야 합니다.

브라우저 간 호환성 모범 사례

브라우저 간 호환성 보장:모든 브라우저에서 원활하게 작동하는 웹 사이트 구축 측정 도구를 보여주는 인포그래픽. 이미지 크레딧 Creative Bloq

문서 유형 정의

<!DOCTYPE>로 HTML 문서를 시작하세요. 표준 모드가 활성화되었는지 확인하는 선언입니다.

이는 웹 브라우저에 페이지가 작성된 HTML 버전을 알려주기 때문에 중요합니다. 이것이 없으면 브라우저는 사용자가 오래된 비표준 코드를 작성했다고 가정하는 "쿼크 모드"로 페이지를 렌더링할 수 있습니다. 이는 최신 웹 표준이 완전히 적용되지 않기 때문에 궁극적으로 예측할 수 없는 스타일 및 레이아웃 문제로 이어집니다.

<!DOCTYPE> HTML5의 선언은 HTML 파일의 맨 처음 부분에 다음과 같습니다:

<!DOCTYPE html>

CSS 재설정 사용

CSS 재설정은 기본적으로 공통 요소를 대상으로 하는 규칙 세트를 추가하여 기본 스타일을 제거하고 브라우저 기본 불일치를 줄이는 것입니다.

다양한 브라우저에는 HTML 요소(여백, 패딩, 글꼴 크기 등)에 대해 서로 다른 고유 스타일이 있습니다. 따라서 CSS 재설정을 구현하면 코드에 작성한 스타일만 적용됩니다. 이는 다양한 브라우저에서 웹페이지 스타일을 지정하기 위한 일관된 기준으로 이어집니다.

처음부터 직접 작성하는 것을 좋아하는 개발자가 있습니다. 그리고 아래 코드에서 볼 수 있듯이 Eric Meyer의 인기 있는 무료 CSS 재설정을 사용하는 저와 같은 사람들도 있습니다.

/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Normalize.css를 사용하는 또 다른 개발자 그룹이 있는데, npm과 같은 패키지 관리자를 사용하여 설치한 다음 CSS로 가져올 수 있습니다.

npm install normalize.css

CSS 속성 지원 검토

고급 CSS 기능을 사용하기 전에 Can I Use와 같은 웹사이트에서 호환성을 확인하세요. 여기에서 다양한 브라우저 및 버전에 걸친 HTML, CSS 및 JavaScript 기능에 대한 자세한 호환성 표를 찾을 수 있습니다. 이는 어떤 기술을 사용할지, 대체 구현 시기를 결정하는 데 도움이 됩니다.

아래 스크린샷에서 저는 CSS Grid를 검색했고 이를 지원하는 다양한 브라우저와 버전을 즉시 확인했습니다. 따라서 내 웹페이지에 CSS 그리드를 구현하기 전에 CSS 그리드가 작동하는 브라우저에 대한 아이디어를 갖고 있습니다.

브라우저 간 호환성 보장:모든 브라우저에서 원활하게 작동하는 웹 사이트 구축 CSS 그리드에 대한 브라우저 호환성.

반응형 웹사이트 만들기

현재 우리가 살고 있는 다중 장치 세계에서는 웹 개발자로서 응답성을 최우선으로 생각해야 합니다.

유동적인 레이아웃, 유연한 이미지, 미디어 쿼리를 사용하여 웹사이트가 모든 화면 크기에 맞춰지도록 할 수 있습니다. 적절한 응답성을 확보함으로써 얻는 파급 효과는 브라우저 간 호환성, 접근성 및 향상된 사용자 경험입니다.

다음은 반응형 디자인에 대한 몇 가지 모범 사례와 이를 구현하는 방법을 논의한 기사입니다.

크로스 브라우저 테스트 수행

최근 프로그래밍에서 테스트가 화두가 되었지만, 작성한 코드가 예상대로 작동하는지 확인하는 것이 매우 중요하기 때문입니다.

하지만 TypeScript 코드가 원활하게 실행되는지 확인하는 것만이 아닙니다. 단순한 웹 프로젝트라도 철저한 테스트가 필요합니다.

크로스 브라우저 테스트란 다양한 브라우저와 기기에서 웹페이지를 시험하여 전체적으로 일관되게 보이고 작동하는지 확인하는 것을 의미합니다.

결론

브라우저 간 호환성은 발음하기 어려울 수 있습니다. 하지만 지금까지 살펴본 것처럼 웹사이트를 구축할 때 고려해야 할 사항이 있습니다. 그리고 코드를 테스트 및 조정하고 위에서 논의한 5가지 모범 사례 중 일부를 구현하여 점진적으로 웹 사이트를 호환 가능하게 만들 수 있습니다.

따라서 다음 웹사이트나 웹 앱을 시작하기 전에 Chrome, Firefox, Safari 및 기타 브라우저의 사용자가 동일한 내용을 보고 경험하고 있는지 확인하는 것을 잊지 마세요.

다음은 유용한 자료입니다:

  • 크로스 브라우저 호환성에 관한 MDN 웹 문서
  • 크로스 브라우저 호환성의 중요성에 관한 코드페이퍼
  • CSS 재설정에 대한 Eric Meyer

무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요