웹 브라우저는 웹 사이트만큼 오래되었습니다. 실제로 브라우저는 경험이나 사이트를 보는 사람들에게 필수적인 요소이지만 모든 브라우저가 똑같이 생성되는 것은 아닙니다. 상당히 오래되었고 더 최신 브라우저에서 볼 수있는 기능이 누락 된 브라우저에서 고객이 웹 페이지를 보는 것은 전적으로 가능합니다. 이것은 웹 사이트 디자인 및 개발의 최신 발전을 이용하는 웹 사이트를 개발하기 위해 노력할 때 심각한 문제를 일으킬 수 있습니다. 누군가가 골동품 브라우저 중 하나를 사용하여 사이트를 방문하고 최신 고급 기술이 작동하지 않는 경우 전체적으로 좋지 않은 경험을 제공 할 수 있습니다. 점진적 향상이란 다양한 브라우저, 즉 현대적인 지원이 부족한 오래된 브라우저에 대한 웹 페이지 디자인을 처리하는 전략입니다.
점진적 향상은 웹 페이지를 디자인하는 방법으로 사용자 에이전트가 지원하는 기능이 많을수록 웹 페이지의 기능이 많아집니다. 이것은 우아한 퇴화 로 알려진 설계 전략의 반대입니다. 이 전략은 가장 최신의 브라우저를위한 페이지를 만든 다음, 덜 기능적인 브라우저로도 원활하게 작동하도록합니다. 경험은 "정상적으로 저하됩니다." 프로그레시브 향상 기능은 처음에는 기능이 부족한 브라우저에서 시작하여 거기에서 경험을 쌓습니다.
점진적 향상 사용 방법
점진적 향상을 사용하여 웹 디자인을 만들 때 가장 먼저 할 일은 웹 브라우저의 가장 낮은 공통 분모에서 작동하는 디자인을 만드는 것입니다. 핵심적인 점진적 향상 기능은 하위 집합이 아닌 모든 웹 브라우저에서 콘텐츠를 사용할 수 있어야한다고 말합니다. 이러한 이유로 구식이고 구식이며 기능이 부족한 브라우저를 지원하는 것부터 시작합니다. 제대로 작동하는 사이트를 만들면 그 (것)들을 위해, 당신은 당신이 모든 방문자에게 적어도 쓸모있는 경험을 전달해야하는 기준선을 창조했다는 것을 알고있다.
가장 적게 사용 가능한 브라우저로 시작하는 경우 모든 HTML이 유효하고 의미 상 정확해야합니다. 이렇게하면 가장 다양한 다양한 사용자 에이전트가 페이지를보고 정확하게 표시 할 수 있습니다.
시각적 디자인 스타일과 전반적인 페이지 레이아웃은 외부 스타일 시트 를 사용하여 추가됩니다. 이것은 진보적 인 향상이 실제로 일어나는 곳입니다. 스타일 시트를 사용하여 모든 방문자에게 적합한 사이트 디자인을 만듭니다. 그런 다음 사용자 에이전트가 기능을 수행 할 때 스타일을 추가하여 페이지를 향상시킬 수 있습니다. 모든 사람들은 기준선 스타일을 얻지 만보다 고급스럽고 현대적인 스타일을 지원할 수있는 뉴스 브라우저의 경우 추가 기능을 갖습니다. 이러한 스타일을 지원할 수있는 브라우저의 페이지를 "점진적으로 향상"합니다.
점진적 향상을 적용 할 수있는 몇 가지 방법이 있습니다. 먼저 CSS 라인을 이해하지 못한다면 브라우저가하는 일을 고려해야합니다. 이것은 실제로 당신의 호의에서 작동합니다. 모든 브라우저가 이해할 수있는 기본 스타일 세트를 작성하면 새 브라우저에 대한 스타일을 추가 할 수 있습니다. 스타일을 지원하면 스타일을 적용합니다. 그렇지 않은 경우에는 무시하고 해당 기준 스타일 만 사용합니다. 점진적인 향상의 간단한 예제는이 CSS에서 볼 수 있습니다.
.메인 콘텐츠 {
배경 : # 999;
배경 : rgba (153,153,153, .75);
}
이 스타일은 먼저 배경을 회색 색상으로 설정합니다. 두 번째 규칙은 RGBA 색상 값을 사용하여 투명도 수준을 설정합니다. 브라우저가 RGBA를 지원하면 첫 번째 스타일이 두 번째 스타일보다 우선 적용됩니다. 그렇지 않으면 첫 번째 것만 적용됩니다. 기본 색상을 설정 한 다음 최신 브라우저를위한 추가 스타일을 추가했습니다.
기능 쿼리 사용
점진적 향상을 적용 할 수있는 또 다른 방법은 "기능 쿼리"라고하는 것을 사용하는 것입니다. 이는 반응 형 웹 사이트 디자인 의 핵심 요소 인 미디어 쿼리 와 유사합니다. 미디어가 텍스트를 특정 화면 크기로 쿼리하는 동안 기능 쿼리는 특정 기능이 지원되는지 여부를 확인합니다. 사용할 구문은 다음과 같습니다.
@supports (디스플레이 : flex) {}이 규칙에 추가 한 스타일은 해당 브라우저가 Flexbox의 스타일 인 "flex"를 지원하는 경우에만 작동합니다. 모든 사용자에 대해 한 세트의 규칙을 설정 한 다음 기능 쿼리를 사용하여 일부 브라우저에만 추가 기능을 추가 할 수 있습니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 12/13/16에 편집 됨.