CSS와 Javascript를위한 10 가지 유용한 대체 방법

코드 폴백은 많은 고유 방문자와의 절충을위한 완벽한 솔루션입니다. 웹상의 모든 사용자가 동일한 운영 체제, 웹 브라우저 또는 실제 하드웨어를 사용하는 것은 아닙니다. 이 모든 요소가 웹 페이지가 실제로 화면에 렌더링되는 방법을 결정합니다. 새로운 CSS 또는 JavaScript 트릭을 사용하여 작업 할 때 종종 이러한 기술적 버그가 발생합니다.

그러나이 함정이 당신을 낙담하게하지 마십시오! 이 가이드에서는 가장 일반적인 폴백 기술 CSS와 JavaScript / jQuery에 중점을 둔 웹 디자이너를위한 것입니다. 다른 모든 것이 실패하면 사용자에게 최소한 기본 페이지 기능을 제공하려고합니다. 단순함은 사용자 경험 디자인 분야에서 최고입니다..

아래의 가이드를 확인하고 의견 섹션에 귀하의 생각과 질문을 알려주십시오..

1. 이미지로 둥근 모서리

CSS3 기술은 주류 웹 디자인으로 급격히 증가했습니다. 가장 눈에 띄는 특성 중 하나는 국경 - 반경 즉각적인 둥근 모서리가 가능합니다. 이 버튼은 사실상 모든 버튼, div 또는 텍스트 상자에서 아름답게 보입니다. 유일한 문제는 웹 브라우저 간의 제한된 지원입니다..

Internet Explorer 7을 비롯한 많은 구형 브라우저는이 속성을 지원하지 않습니다. 따라서 모든 표준 브라우저에서 모서리를 둥글게 유지하려면 이미지로 대체해야합니다..

표준 코드는 각 코너의 이미지를 수용하면서 주 div에서 일반 CSS3 속성을 사용합니다. 백그라운드에서 모서리 이미지를 표시하는 데 사용되는 기본 컨테이너 내에서 몇 가지 추가 div를 설정해야 할 것입니다..

#mainbox -webkit-border-radius : 5px; / * 사파리 * / -moz-border-radius : 5px; / * Firefox \ Gecko Engine * / -o-border-radius : 5px; / * Opera * / border-radius : 5px;  #mainbox .topc background : url ( 'corner-tl.png') 반복 안 함 왼쪽 위;  #mainbox .topc span background : url ( 'corner-tr.png') no-repeat 오른쪽 상단.  #mainbox .btmc background : url ( 'corner-bl.png') 반복 안함 왼쪽.  #mainbox .btmc span background : url ( 'corner-br.png') no-repeat 하단 오른쪽.  

스트레스를 피하기 위해 RoundedCornr과 같은 앱을 사용하는 것이 좋습니다. CSS3와 이미지를 사용하여 둥근 모서리 CSS를 생성하는 브라우저 내 웹 앱입니다. 이 기능은 Photoshop이나 GIMP와 같은 그래픽 소프트웨어에 대한 액세스 권한이없는 디자이너에게 특히 유용합니다..

2. jQuery 드롭 다운 메뉴 시스템

드롭 다운 메뉴 시스템은 오늘날의 웹에 적합합니다. 그러나 가장 큰 문제는 방문자가 JavaScript를 사용하지 않고 웹 사이트에 액세스하는 것입니다. 이 경우 어떤 메뉴도 전혀 작동하지 않습니다! 가장 좋은 해결책은 CSS를 사용하여 각 하위 메뉴 div 블록을 표시 / 숨기고 마우스를 올리면 표시하는 것입니다..

이 솔루션의 유일한 문제점은 Internet Explorer 6이 CSS 호버 선택기를 지원하지 않는다는 것입니다. 그러나 IE7 +는 훌륭하게 작동합니다. 물론 자바 스크립트가 활성화되어 있으면 모든 브라우저가 정상적으로 작동합니다. 이 튜토리얼의 CSS Plus 코드는 내가 찾은 최고의 리소스 중 하나입니다. jQuery뿐만 아니라 IE 문제에 필요한 CSS도 제공합니다..

/ * 현재 클래스는 jQuery * / #nav li.current> a background : # f7f7f7;  / * CSS fallback * / #nav li : 호버> ul.child display : block;  #nav li : hover> ul.grandchild display : block;  

출처

시도 할 수있는 또 다른 대안은 IE6의 각 메뉴를 공개적으로 표시하는 것입니다. Internet Explorer 조건부 주석을 사용하여 브라우저 버전을 기반으로 스타일 시트를 적용 할 수 있습니다. 물론, 이것은 가장 좋은 해결책은 아니지만 단순히 작동 할 것입니다..

Internet Explorer 6이 많은 걱정거리가 아니라고 생각한다면이 대체 대안으로 귀찮게하지 마십시오. 위의 튜토리얼과 후속 코드는 모든 주요 브라우저에서 엄격한 CSS를 사용하여 JavaScript 메뉴를로드하기에 충분해야합니다..

3. 대상 Internet Explorer 스타일

마이크로 소프트 인터넷 익스플로러에서 나오는 렌더링 문제에 대해 모두 알고있을 것입니다. IE9를 통해 최신 IE8 및 향후 전망에 대해 약간의 공로를 나타낼 수 있습니다. 그러나 아직 IE6 / IE7을 운영하는 소수의 독자가 있습니다. 당신은 정말로 그들을 무시할 수 없습니다..

(이미지 출처 : github)

마지막 섹션에서 언급 한 조건부 주석은 페이지의 영역을 다시 포맷하는 데 유용 할 수 있습니다. 예를 들어 자바 스크립트를 사용하여 표시되는 IE6의 하위 탐색 메뉴가있는 드롭 다운 메뉴가있는 경우 대체 방법으로 CSS를 사용해보아야합니다. 대신 최상의 해결책은 각 하위 목록을 탐색 블록으로 표시하는 것입니다..

문서 헤더에 위의 코드를 추가하면 각 하위 탐색에 대한 표시 유형을 지정할 수 있습니다. 이 대체 기능의 가장 중요한 부분은 CSS를 덮어 쓰고 JavaScript가 활성화되어있을 때 메뉴를 동적으로 표시하거나 숨길 수 있다는 것입니다. 그렇지 않으면 열려있는 링크 목록 만 표시됩니다. 아래에 추가 한 것과 비슷한 코드를 사용할 수 있습니다..

#nav li 위치 : 상대적; 너비 : 150px; / * IE * /에 대한 유한 너비를 설정해야합니다. #nav li ul / * sub-nav codes * / display : block; 위치 : 절대; 너비 : 자동; / * 자신의 너비를 정의하거나 li 요소에 설정하십시오 * / #nav li ul li width : 100 %;  

4. 레거시 IE 불투명도 / 투명성

Internet Explorer를 사용하는 많은 성가신 버그 중 하나는 불투명도입니다. CSS3의 알파 투명도 설정은 opacity 속성을 통해 변경할 수 있습니다. 그러나 Microsoft의 경우 현재 Internet Explorer 9에서만이 기능을 지원합니다.

IE6 +를 타겟팅하기위한 최상의 솔루션은 필터, Internet Explorer에서만 인식되는 독점적 인 설정입니다. 아래의 간단한 코드 예제를 확인하십시오.

.mydiv 불투명도 : 0.55; / * CSS3 * / filter : 알파 (불투명도 = 55); / * IE6 + * / 

투명성을 요구하는 요소 내에 위의 행을 포함 시키면됩니다. CSS3 속성과 비슷하게 모든 자식 요소는이 불투명도 변경을 상속받습니다. 특히 IE8을 대상으로하는 새로운 메소드를 찾고 있다면 아래 코드를 확인하십시오. 필터 속성이 Microsoft IE8 파서에서만 인식되는 것과 같은 방식으로 작동합니다..

-ms 필터 : "progid : DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * / 

5. 대체 이미지가 포함 된 CSS3 버튼 만들기

버튼은 모든 종류의 인터페이스를위한 환상적인 웹 요소입니다. 양식 입력, 탐색 항목 또는 직접 페이지 링크로 작동 할 수 있습니다. CSS3를 사용하면 배경 그라디언트, 상자 그림자, 둥근 모서리 등과 같은 고유 한 스타일로 버튼을 포맷 할 수 있습니다..

그러나 모든 방문자가이 새로운 속성을 렌더링 할 수 있다고 믿을 수는 없습니다. 버튼 (또는 유사한 UI 요소)에 대한 대체 설계를 작성할 때 두 가지 별개의 옵션이 있습니다. 첫 번째는 CSS가 보일 것처럼 정확하게 디자인 된 배경 이미지를 포함하는 것입니다. 이것은 Photoshop에서 쉽게 수행 할 수 있습니다. 그러나 소프트웨어 전문가가 아닌 경우 문제가 될 수 있습니다..

대안은 일반 배경색과 간단한 CSS 스타일로 대체하는 것입니다. 나는 CSS3의 그라데이션에 대한 CSS-Tricks 위대한 게시물의 코드 예제를 사용하고 있습니다. Safari, Firefox, Chrome, 심지어 Opera를 포함한 모든 주요 브라우저는 이러한 속성을 지원합니다. 이슈가 발생하는 영역은 레거시 브라우저의 지원에 있습니다. 오래된 모질라 엔진, IE6 / 7, 심지어 모바일 사파리까지 가능합니다..

.그라디언트 -bg 배경색 : # 1a82f7; / * 최악의 경우 단색을 사용합니다. * / background-image : url ( 'https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image : -webkit-gradient (선형, 0 % 0 %, 0 % 100 %, from (# 2F2727), (# 1a82f7)); background-image : -webkit-linear-gradient (맨 위, # 2F2727, # 1a82f7); background-image : -moz-linear-gradient (맨 위, # 2F2727, # 1a82f7); background-image : -ms-linear-gradient (맨 위, # 2F2727, # 1a82f7); background-image : -o-linear-gradient (맨 위, # 2F2727, # 1a82f7);  

출처

대체 방법으로 이미지를 단독 사용하는 경우의 작은 문제는 사용자가 버튼을 클릭 할 때 활성 상태가 변경되지 않는다는 것입니다. 이러한 추가 이미지를 만들려면 몇 가지 추가 작업이 필요하지만 일반 이미지와 활성 이미지의 두 가지 이미지를 만들 수 있습니다. 이 이유만으로 대체 이미지 대신 단색 배경색을 사용하도록 유도 할 수 있습니다. 레이아웃에서 가장 잘 보이는 두 가지 솔루션을 시도해보십시오..

6. 모바일 콘텐츠 확인

2012 년에 또 다른 큰 추세는 모바일 인터넷 브라우징의 인기입니다. 스마트 폰은 어디 에나 있으며 3G / Wi-Fi를 통한 데이터 액세스가 점점 더 많아지고 있습니다. 따라서 많은 디자이너들이 모바일 사용자를위한 대체 레이아웃을 제공하고자합니다..

몇 가지 인기있는 모바일 웹 브라우저는 데스크톱 환경과 유사한 페이지를 렌더링합니다. 모바일 사파리와 오페라는 이것으로 가장 잘 알려져 있으며, 많은 일반적인 jQuery 스크립트를 지원합니다. 하지만이 페이지는 항상 모바일 친화적 인 것은 아니며 UX를 확장 할 여지가 있습니다..

모바일 브라우저를 감지하고 대체 레이아웃이나 스타일 시트를 표시하는 두 가지 방법이 있습니다. 첫 번째는 프론트 엔드 도구로 잘 작동하는 JavaScript를 사용하는 것입니다. 아래에 추가 한 스크립트는 매우 간단하며 iPhone / iPod Touch 사용자 만 검사합니다. 모바일 브라우저 검색은 대신 실행할 수있는보다 자세한 스크립트를 제공하는 환상적인 웹 사이트입니다..

// 아이폰 / 아이팟 터치 기능을 리디렉션 isiPhone () return ((navigator.platform.indexOf ( "iPhone")! = -1) || (navigator.platform.indexOf ( "iPod")! = -1)));  if (isiPhone ()) window.location = "m.yourdomain.com";  

이제 다른 대안은 PHP와 같은 백엔드 언어를 통해 확인하는 것입니다. 변수로 알려진 변수를 확인할 수 있습니다. HTTP_USER_AGENT. 당신이이 기간을 google 경우에 수십개의 웹 사이트가 나타납니다. 그러나 이전 단락에서 추가 한 모바일 브라우저 검색 링크를 여전히 권장합니다..

이 사이트는 PHP뿐만 아니라 다른 인기있는 백엔드 언어들도 구문 분석 할 수있는 무료 스크립트를 다운로드 할 수 있습니다. 여기에는 ASP.NET, ColdFusion, Rails, Perl, Python 및 심지어 IIS 및 Apache와 같은 서버 기반 코드가 포함됩니다..

7. 우아한 폴백을 가진 슬라이스 박스 슬라이더

2011 년 내가 좋아하는 CSS3 공짜 물건은 아마도 Codrops에서 발표 한 Slicebox 3D 이미지 슬라이더 여야합니다. 현재 Google 크롬 및 Safari의 최신 버전에서 지원되는 브라우저에서 아름다운 CSS 애니메이션 전환을 사용합니다. 최신 파이어 폭스 또는 IE9 릴리스에서도 여전히 이러한 전환을 사용할 수 없다는 것은 이상한 일입니다..

이 코드의 가장 중요한 부분은 이미지간에 기본적인 전환 효과를 제공하기 위해 대체 될 것입니다. 대부분의 애니메이션이 jQuery를 통해 수행되지만, 표준 CSS 대체 옵션은 얼마나 많은 브라우저가 화려한 CSS3 애니메이션을 지원할 수 없는지를 고려하여 여전히 매우 안정적입니다.

또는 Codrops는 최근에 더욱 창의적인 CSS3 기술을 사용하는 또 다른 슬라이딩 이미지 패널을 발표했습니다. 이 이미지 슬라이더는 CSS의 배경 이미지를 사용하여 만들어 지므로 전환 효과가 없어도 매우 부드럽게 동작합니다..

8. jQuery 스크립트 CDN Failsafe 메소드

jQuery 라이브러리는 웹에서 JavaScript를 개발하는 데 거의 필수적입니다. 많은 대체 CDN 공급 업체가 jQuery의 모든 릴리스 버전을 호스팅하는 정적 URL을 작성했습니다. Google, Microsoft 및 심지어 jQuery도 개발자를위한 CDN 포털을 만들었습니다..

이러한 공급자에 의존하는 수십만 명의 개발자가 있습니다. 어떤 이유에서든 링크가 끊어 지거나 서버가 오프라인 상태가 된 경우 어떤 일이 발생합니까? 로컬 복사본을 호스팅하고 필요할 경우에만 구현하는 것이 좋습니다. CSS-Tricks의 멋진 대체 코드 스 니펫을 사용하면!

출처

9. 독특한 HTML5 체크 박스

HTML5는 웹 사이트를 구축하기위한 멋진 스타일을위한 문호를 열었습니다. 이 향상된 웹 경험의 일부는 양식과 입력 요소를 통해 이루어집니다. 확인란은 필요에 맞게 크게 사용자 정의 할 수있는 한 가지 예일뿐입니다..

이 훌륭한 CSS / jQuery 튜토리얼을 2011 년 봄 초에 게시했습니다. 이전 브라우저에서 정상적으로 성능이 저하되는 체크 상자에 대해 Apple 스타일의 스위치를 만드는 간단한 방법을 제공합니다. 이 코드는 백그라운드 이미지를 사용하여 사용자 상호 작용간에 온 / 오프 스타일을 대체합니다..

원래 입력 체크 박스 요소는 기본적으로 숨겨져 있으며 값은 JavaScript 호출을 통해 결정됩니다. 이는 jQuery를 통해 언제든지 동적으로 값을 가져올 수 있음을 의미하지만, 해당 값을 jQuery에 전달하면 양식으로 전달됩니다. “제출하다” 단추.

이전 브라우저에서 JavaScript가 꺼져 있거나 지원되지 않는 경우 스크립트는 정규 HTML 입력을 기본값으로 사용합니다. 이렇게하면 더 새로운 체크 박스 스타일에 대한 CSS가 비활성화되므로 아무 것도 변경되지 않은 것처럼 보입니다. 스크립트는 다른 어떤 것보다 깨끗한 폴백을 가진 미적 프론트 러너처럼 행동합니다. 그러나 이러한 슬라이더는 환상적으로 보이며 선택 도구와 라디오 버튼과 같은 다른 양식 입력 필드에도 동일한 기술을 적용 할 수 있습니다.

10. HTML5 지원되는 비디오

새로운 HTML5 사양은 많은 분야에서 매우 진보적입니다. 비디오 및 오디오 요소 모두 다수의 미디어 파일에 대한 네이티브 지원이 향상되었습니다. 그러나 HTML5 지원 브라우저 사이에서 파일 형식에 모두 동의하지는 않습니다..

Mozilla Firefox는 일반적으로 VLC를 변환기로 사용할 수있는 .OGG 비디오를 지원합니다. Chrome 및 Safari는 .MP4 또는 H.264로 인코딩 된 .MOV 파일을 찾습니다. 이러한 차이점 때문에 일반적으로 다음을 포함해야합니다. 세 서로 다른 비디오 형식 - 위에 나열된 두 가지 .FLV 대체물과 함께.

고맙게도 몇몇 현명한 사람들은 VideoJS라는 라이브러리를 구성했습니다. 하나의 태그에 Flash 및 HTML5 동영상을 한 번 구현할 수있는 매우 작은 JavaScript 빌드입니다. 무료로 소스를 다운로드하고 열 수 있기 때문에 개발자는 기여할 수 있습니다. 플래시 및 HTML5 동영상 플레이어는 모두 동일하게 맞춤 설정되므로 모든 사용자가 동일한 경험을 할 수 있습니다. HTML5 동영상 퍼가기 코드 예제를 확인하십시오.

출처

비슷한 경로에 따라 html5media 프로젝트는 모든 스트리밍 미디어를 하나의 파일 유형으로 통합하는 방법을 제공합니다. 불행히도 VideoJS조차 모든 단일 브라우저에서 완벽하지 않습니다. html5media 프로젝트가 시도한 작업은 모든 플랫폼에서 모든 비디오 파일 형식을 지원하는 브라우저 비 호환성 문제를 해결하는 것입니다. 실제로는 꽤 잘 작동합니다.!

결론

유용한 대체 방법에 대한 가이드가 전 세계 웹 개발자에게 도움이되기를 바랍니다. 광범위한 소프트웨어 사양에 맞게 웹 사이트를 구축 할 수 있습니다. CSS 및 JavaScript와 같이 다양한 언어로 작업 할 때 특히 그렇습니다..

그러나 추세는 우리가 웹 디자인에서보다지지적인 시대에 다 다르고 있음을 나타냅니다. 이전에는 CSS3 및 HTML5에서 더 많은 브라우저와 웹 표준이 합의 된 적이 없었습니다. 이러한 기술은 표준 준수 웹 페이지를 작성할 때 고려해야 할 몇 가지 사항 중 일부일뿐입니다. 웹 개발자로서 항상 최신 디자인 동향을 따르고 잠재 고객에게 가장 잘 적응하고 싶을 것입니다..