찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 CSS3 새로운 웹 표준 및 브라우저 지원_html5 튜토리얼 기술

HTML5 CSS3 새로운 웹 표준 및 브라우저 지원_html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:51:271655검색

노트에서 나온 것이기 때문에 각 항목에 대한 제목과 문법적 특징만 나열하겠습니다. 당분간 자세한 설명과 실행 가능한 예를 작성할 시간이 없지만 관련 문서 주소를 나열하겠습니다. 이미 이 기능을 지원하는 브라우저는 지원되지 않는 브라우저에 대한 대체/전환 구현도 제공합니다. 뭐, 원래는 개인적으로 메모했던 내용인데, 특히 에버노트에 메모하는 걸 좋아해요. 저번에 르우 선생님의 글을 봤을 때 제 나이가 이제 막 기억력의 정점에 접어들었다고 했는데… 자신감은 여전히 ​​​​두드러집니다! 예를 들어 에서 광대가 자신을 투페이스로 만든 병원 검사에게 한 말을 다른 사람들과 이야기할 때 대사 한 줄도 기억나지 않았고, 페니가 에이지 역을 맡았을 때 캐릭터 이름이 뭐였는지 기억나지 않았다. 빅뱅이론 S2의 코난? '페넬로페 여왕'을 보고 너무 감동해서 한 달 뒤에는 오디세이도 기억나지 않을 정도였다. 메모를 남기면 항상 마음이 편해집니다... 아, 또 주제에서 벗어났네요.

이 기사에서는 가장 중요한(또는 상대적으로 인기 있는) 새로운 표준 중 일부를 편집했습니다. 대부분은 아직 w3c의 초안이고 아직 권장 수준의 초기 단계이지만 새로운 표준에서는 높은 관심을 받고 있습니다. 브라우저 전쟁으로 수많은 관련 데모와 API 패키지가 개발자 커뮤니티에 등장했고 일부는 프로덕션 환경(예: iPhone의 Google Gmail 오프라인 애플리케이션)에 진입했습니다. 제조업체의 독점 기술에서 킬러 애플리케이션을 생산하기 위해 위원회 표준을 범용 기술로 변환하는 주기가 크게 가속화되었습니다. 이제 웹 애플리케이션에 대한 수요가 너무 높기 때문입니까... 업데이트: 방금 Solidot에 소프트 아티클을 올렸을 때 문득 이런 생각이 들었습니다. 이 문제를 표현하는 방법을 이해하십시오. 실제로 많은 브라우저 제조업체도 브라우저 기반 애플리케이션 개발자이자 웹 표준 설정자입니다. 마치 무대를 만드는 엔지니어도 무대의 배우이기도 합니다. 무대와 댄스 디렉터가 움직이기 때문에 Google, Mozilla 및 Apple은 웹 애플리케이션 개발에 도움이 되는 기술 표준을 구현하려는 노력을 아끼지 않습니다. 비록 아직 W3C Working Draft이지만 IE 팀에는 동기가 부족합니다. 계획경제는 활력이 부족해요XD...

노트에서 파생된 것이므로 각 항목의 제목과 문법적 특징만 나열하겠습니다. 당분간 자세한 설명과 실행 가능한 예를 작성할 시간은 없지만 관련 문서 주소를 제공하겠습니다. 이 기능이 지원되는 브라우저를 나열하는 것 외에도 이를 지원하지 않는 브라우저에 대한 대체/전환 구현도 제공합니다.

===================말도 안되는 구분선====================== ==

CSS3 미디어 쿼리

외부 링크 CSS 파일 전체와 일부 CSS 코드에 대한 미디어 유형 감지가 인기가 높은 이유는 분명 모바일 기기 때문입니다...

  1. <링크 미디어="전체 및(방향:세로)” src= "screen.css" 유형=" 텍스트/css">
  1. @media 전체 및(최소 색상: 4) { ... }

w3c 표준: http://www.w3.org/TR/css3-mediaqueries/
MDC 문서: https://developer.mozilla.org/En/CSS/Media_queries
Opera 문서: http ://www.opera.com/docs/specs/css/

지원: Firefox 3.5, Safari 3, Opera 7

CSS3 2D 변환

css 변형, 어떤 사람들은 의사 3D 효과와 회전 효과를 얻기 위해 이 jquery 플러그인을 사용합니다

  1. -moz-transform: 회전(-45도) 비뚤어짐(15도, 15도);
  1. 스프라이트.스타일['-webkit-transform'] = '회전(' v 'rad)';

w3c 표준: http://www.w3.org/TR/css3-2d-transforms/
MDC 문서: https://developer.mozilla.org/En/CSS/CSS_transform_functions
웹킷 블로그 소개: http://webkit.org/blog/130/css-transforms/

지원: Firefox 3.5, Safari 3.1
대체/전환: IE5.5 매트릭스 필터 http://msdn.microsoft.com/en-us/library/ms533014(VS .85).aspx

CSS3 전환 및 CSS 애니메이션

웹킷 팀이 제안한 초안인 많은 기대를 모으는 CSS 애니메이션은 간단한 속성 그라데이션을 구현하는 전환이며, 애니메이션은 보다 복잡한 애니메이션 효과를 정의합니다

  1. 전환 속성: 너비;
  2. 전환 기간: 1초;
  4. 애니메이션 이름: '대각선 슬라이드';
  5. 애니메이션 지속 시간: 5초;
  6. 애니메이션 반복 횟수: 10;
  7. @keyframes '대각선 슬라이드' {}

w3c 표준: http://www.w3.org/TR/css3-transitions/
w3c 표준: http://www.w3.org/TR/css3-animations/
웹킷 블로그 소개 : http://webkit.org/blog/138/css-animation/
같은 반 친구 John의 소개: http://ejohn.org/blog/css-animations-and-javascript/

지원: Safari 3.1

CSS3 다운로드 가능한 글꼴

웹 페이지에 어떤 글꼴이든 삽입하는 것은 디자이너의 꿈입니다. 하지만 여기서 지원되는 것은 트루타입과 오픈타입뿐입니다

  1. @font-얼굴 {}

w3c 표준: http://www.w3.org/TR/css3-fonts/#font-resources
MSDN 문서: http://msdn.microsoft.com/en-us/library/ms530303( VS.85).aspx
MDC 문서: https://developer.mozilla.org/en/CSS/@font-face

지원: Firefox 3.5, Safari 3.1, Opera 10.0, IE4.0

보너스: 다른 CSS3 속성과의 호환성

ppk 학생들이 관리하는 문서: http://www.quirksmode.org/css/contents.html
css3.info가 관리하는 문서: http://www.css3.info/modules/selector-compat/
테스트 페이지: http://westciv.com/iphonetests/

HTML5 DOM 저장소

키-값 쌍 형태의 간단한 영구 저장

  1. window.localStorage
  2. window.sessionStorage //교차 도메인 가능, 탭을 닫으면 지워짐

w3c 표준: http://www.w3.org/TR/webstorage/
ppk 학우들이 관리하는 호환성 목록: http://www.quirksmode.org/dom/html5.html#localstorage
MDC 문서: https://developer.mozilla.org/en/DOM/Storage
MSDN 문서: http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

지원: Firefox 3.5, Safari 4.0, IE 8.0

HTML5 오프라인 애플리케이션 캐시

구조화된 데이터가 아닌 오프라인 사용을 위해 매니페스트 파일을 사용하여 정적 리소스(이미지, CSS, js 등)를 캐시합니다

  1. <html 매니페스트="foo. 매니페스트">
  1. 캐시 매니페스트
  2. index.html
  3. 스타일/default.css
  4. images/logo.png

w3c 표준: http://www.w3.org/TR/offline-webapps/#offline
MDC 문서: https://developer.mozilla.org/en/Offline_resources_in_Firefox

지원: Firefox 3.5

HTML5 데이터베이스 스토리지

SQL을 지원하는 로컬 데이터베이스는 Google Gears에서 처음 구현되었습니다. 현재 w3c 초안의 편집자도 Google 엔지니어입니다. 그런데 이상하게도 Gears API는 현재 초안과 호환되지 않습니다. 번들로 제공되는 Gears의 데이터베이스 API는 webkit으로 구현한 html5 api를 삭제했습니다... 그리고 Google이 iPhone에 Gmail 오프라인 기능을 구현할 때도 webkit api를 사용했습니다... 정말 혼란스럽습니다...

  1. var db = window.openDatabase("메모", ", "예제 노트 앱!", 1048576) ;
  2. db.트랜잭션(기능(tx) {
  3. tx.executeSql('SELECT * FROM 메모', [], 기능(tx, rs) {});
  4. });

w3c 표준: http://www.w3.org/TR/offline-webapps/#sql
웹킷 블로그 소개: http://webkit.org/blog/126/webkit-does-html5- 클라이언트 측 데이터베이스 저장소/
iphone 문서: http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3 - SW1

지원: Safari 3.1
대체/전환: Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 웹 작업자

다중 스레드, 백그라운드에서 복잡한 작업 수행, DOM 작동 불가, 메시지 이벤트를 통한 스레드 간 통신

  1. var myWorker = new Worker ('my_worker.js');
  2. myWorker.onmessage = 기능(이벤트) { 이벤트.데이터 };
  3. myWorker.postMessage(str);

w3c 표준: http://www.w3.org/TR/workers/
MDC 문서: https://developer.mozilla.org/En/Using_web_workers

지원: Firefox 3.5
대체/전환: Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 위치정보

지오 API

  1. 창.네비게이터.위치정보

w3c 표준: http://www.w3.org/TR/geolocation-API/
MDC 문서: https://developer.mozilla.org/En/Using_geolocation

지원: Firefox 3.5
대체/전환: Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 드래그 앤 드롭

네이티브 드래그 이벤트

  1. 드래그 시작
  2. 온드래그
  3. 온드래그엔드
  4. //드래그하는 중
  5. 온드라젠터
  6. 온드래그오버
  7. 온드래그레이드
  8. 온드롭

w3c 표준: http://www.w3.org/TR/html5/editing.html#dnd
MDC 문서: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple 문서: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

지원: Firefox 3.5, Safari 2.0, Chrome 1.0, IE 5.0

HTML5 오디오 및 비디오

비디오와 오디오를 삽입하기 위해 html 태그를 사용하는 것의 장점은 "오픈 소스 형식"이 아니라 멀티미디어가 다른 페이지 요소와 상호 작용할 수 있도록 하거나 페이지 기술을 사용하여 비디오와 "매시업"할 수 있는 "개방성"입니다. 일종의 무작위 조합 RIA와 상호 작용할 수 있는 능력은 웹 기술 번영의 초석이자 플래시와 같은 폐쇄형 RIA 컨테이너의 가장 큰 단점이기도 합니다.

  1. <동영상 컨트롤>
  2. <소스 src="좀비. ogg” 유형=”동영상/ogg ”/>
  3. <소스 src="좀비. mp4″ 유형=”동영상/mp4 ″/>
  4. 동영상>

MDC 문서: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
웹킷 블로그 소개: http://webkit.org/blog/140/html5-media-support/

지원: Firefox 3.5, Safari 3.0, Chrome 3.0
대체/전환: 비디오 태그가 포함된 중첩 삽입 http://hacks.mozilla.org/2009/06/html5 - video-fallbacks-markup/

HTML5 캔버스

애플이 개발해 현재 주류인 js 이미지 기술인 대시보드에 처음 사용된 모질라는 이미 OpenGL ES 표준 캔버스 3D를 구현하고 있다고 합니다. 또한 IE팀에서는 캔버스를 지원하기 위해 많은 노력을 했다고 합니다. . 사실 캔버스 API는 상당히 낮은 수준입니다. 특히 상호작용 측면에서 svg만큼 직관적이지 않기 때문에 이를 캡슐화하는 라이브러리가 많습니다

  1. var ctx = $('#canvas ')[0].getContext( "2d");
  2. ctx.fillStyle = "#00A308" ;
  3. ctx.beginPath();
  4. ctx.원호(220, 220, 50, 0, 수학.PI*2, 참);
  5. ctx.closePath();
  6. ctx.채우기();

MDC 문서: https://developer.mozilla.org/en/Canvas_tutorial

지원: Firefox 1.5, Safari 2.0, Chrome 1.0, Opera 9.0
대체/전환: excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c 표준: http://www.w3.org/TR/SVG12/
IBM DW 튜토리얼: http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id =84896

지원: Firefox 1.5, Safari 3.0, Chrome 1.0, Opera 9.0
대체/전환: Raphael.js http://raphaeljs.com/

XMLHttp요청 2

주로 요청 프로세스 중 도메인 간 기능과 이벤트를 늘리기 위해

w3c 표준: http://www.w3.org/TR/XMLHttpRequest2/
MDC 문서: https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest(XDR)
MSDN 문서: http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

지원: Firefox 3.5(부분 구현), IE 8.0(부분 구현)

접근 통제

오랫동안 기다려온 도메인 간 액세스 제어. 현재 Firefox 3.5와 IE8 사이에는 몇 가지 차이점이 있습니다. IE8에서 개발한 XDR과 XDM이 표준화를 위해 w3c에 제출될 준비가 되었는지 모르겠습니다...

  1. 액세스 제어-허용-원본: http://foo.example

w3c 표준: http://www.w3.org/TR/cors/
MDC 문서: https://developer.mozilla.org/En/HTTP_Access_Control
교차 문서 메시징(XDM)
MSDN 문서: http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

지원: Firefox 3.5, IE8.0

E4X(ECMA-357)

Firefox와 ActionScript3에는 이미 구현한 게 있는데... 사실 이제 json이 워낙 대중화되다 보니 E4X가 있든 없든 별 문제가 아닌 것 같아요~ (말도 안되는 소리 사실 그냥 쓰는게 편할 것 같아요 html 문자열 대신 js 코드에서 직접 dom 객체를 생성) 많이)

MDC 문서: https://developer.mozilla.org/en/E4X

지원: Firefox 1.5

ECMAScript 5 네이티브 JSON

네이티브 JSON 지원은 eval보다 100배 빠르고 안전합니다. 또한 Douglas Crockford의 json2.js는 js로 구현된 js 인터프리터이므로 더욱 안전합니다.

  1. JSON.파싱( 텍스트, 번역 )
  2. JSON.stringify( obj, 번역 )
  3. 문자열.프로토타입.JSON
  4. 부울.프로토타입.JSON
  5. 번호.프로토타입.JSON
  6. 날짜.프로토타입.JSON

MDC 문서: http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN 문서: http://blogs.msdn.com/ 즉/archive/2008/09/10/native-json-in-ie8.aspx

지원: Firefox 3.5, IE8
대체/전환: json2.js http://www.json.org/json2.js

ECMAScript 5 배열 추가 기능

js1.6에서 구현한 배열 메소드는 주로 함수형 프로그래밍에서 매우 중요한 메소드인 forEach, map, filter와 역질의 메소드입니다

  1. 어레이.프로토타입.indexOf( str )
  2. 어레이.프로토타입.lastIndexOf( str )
  3. 어레이.프로토타입.모든( fn )
  4. 어레이.프로토타입.일부( fn )
  5. 어레이.프로토타입.필터( fn )
  6. 어레이.프로토타입.forEach( fn )
  7. 어레이.프로토타입.맵( fn )

MDC 문서: https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

지원: Firefox2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
대체/전환: Array.prototype을 확장하여 모두 시뮬레이션 가능

ECMAScript 5 isArray()

배열과 객체 구별

  1. 배열.isArray([])// true
지원: 없음

대안/전환: Array.isArray = function(a){ return Object.prototype.toString.call(a) === "[object Array] ”;};


ECMAScript 5 개체

GOOGLE I/O 강의에서 말한 것처럼: 더욱 강력한 객체 시스템



    객체
  1. .getPrototypeOf( obj )

    2. 동급생 John의 설명: http://ejohn.org/blog/objectgetprototypeof/

    지원: Firefox3.5
    대체/전환: object.__proto__ 또는 object.constructor.prototype

    1. 객체.생성( proto, props ) //객체 복제 또는 상속
    3. 객체.키( obj ) //데이터 구조 매핑
    4. 객체.getOwnPropertyNames( obj )
    6. 개체.preventExtensions( obj ) //새 속성을 추가할 수 없습니다.
    7. 객체.isExtensible( obj )
    9. 개체.봉인( obj ) //속성 구성은 삭제 및 수정이 불가능하며, 새 속성을 추가할 수 없습니다.
    10. 개체.밀봉됨( obj )
    12. 개체.정지( obj ) //속성 구성을 삭제하거나 수정할 수 없으며, 새 속성을 추가할 수 없으며, 속성을 쓸 수 없습니다.
    13. 개체.isFrozen( obj )

    동급생 John의 설명: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

    지원: 없음
    교체/전환: Object.create 및 Object.keys를 직접 구현할 수 있습니다.

    ECMAScript 5 속성 설명자

    객체 속성 접근 제어

    1. 객체.getOwnPropertyDescriptor( obj, 소품 )
    2. 객체.defineProperty( obj, prop, desc )
    3. 객체.속성 정의( obj, 소품 )
    4. desc = {
    5. 값: 참,
    6. 쓰기 가능: false, //수정
    7.  열거 가능: true, //for in
    8.  구성 가능: true, //속성 삭제 및 수정
    9. get: 함수(){ return 이름 },
    10.  설정: 함수(값){ 이름 = 값; }
    11. }

    동급생 John의 설명: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

    지원: 없음
    교체/전환: Object.defineProperties는 실제로 Mixin을 구현하는 데 사용되는 jQuery.extend와 동일합니다

    ECMAScript 5 Getter 및 Setter

    Python과 Ruby의 속성 액세스 방법

    1. obj = {
    2. 가져오기 innerHTML() { 반환 … },
    3. 설정 innerHTML(newHTML) { … }
    4. };

    MDC 문서: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

    지원: Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
    대안/전환:

    Firefox 1.5의 비표준, 오래된 방법

    1. HTMLElement.프로토타입.__defineGetter__("innerHTML", 함수 () {});
    2. HTMLElement.프로토타입.__defineSetter__("innerHTML", 함수 (val ) {});

    지원: Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5

    표준

    1. 객체.defineProperty(문서.본문, "innerHTML", { get : 함수 () {} });

    MSDN 문서: http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

    지원: IE8(DOM에서만 사용 가능)

    ECMAScript 5 엄격 모드

    ES5의 엄격 모드는 이전 버전에서 문제를 일으킬 수 있는 요소를 삭제하고, 디버깅을 용이하게 하기 위해 오류를 명시적으로 보고합니다

    1. "엄격 사용"; //다음 상황에서는 예외가 발생합니다.
    2. //정의되지 않은 변수에 값 할당
    3. //작업이 쓰기 불가능, 구성 불가능 또는 확장 불가능 속성으로 설정되었습니다.
    4. //변수, 함수, 매개변수 삭제
    5. //객체 리터럴에 속성을 반복적으로 정의
    6. //eval을 키워드로 사용하고 변수는 eval 문자열에 정의됩니다.
    7. //인수 덮어쓰기
    8. //args.caller 및args.callee 사용(익명 함수는 자체 참조를 위해 이름을 지정해야 함)
    9. //(function(){ ... }).call( null ) // 예외
    10. //다음과 함께 사용

    동급생 John의 설명: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

    지원: 없음
    대안/전환: ... 지금부터 진지한 프로그래밍 습관을 기르기 시작하세요

    ECMAScript 5의 기타 새로운 기능

    함수에 대한 참조를 전달할 때 이것을 바인딩하세요

    1. 함수.prototype.bind(thisArg, arg1, arg2....) /

    지원: 없음
    대안/전환: 프로토타입 http://www.prototypejs.org/api/function/bind

    ISO 형식의 날짜

    1. 날짜.프로토타입.toISOString() // 인쇄 2009-05-21T16:06:05.000TZ

    지원됨: 없음
    대체/전환: datejs http://code.google.com/p/datejs/

    1. 문자열.프로토타입.트림()

    지원: Firefox3.5
    대체/전환: 다양한 일반 구현 http://blog.stevenlevithan.com/archives/faster-trim-javascript


    ==================말도 안되는 것이 다시 시작되는 구분선================= = =====

    사실 저는 혁신의 분위기를 조성하고 많은 신기술이 '실용' 단계에 들어섰다는 사실을 더 많은 사람들이 깨닫게 되기를 바라는 마음에서 이 글을 올렸습니다.

    실험적인 웹게임을 만들고 싶거나 특정 플랫폼(예: iPhone, Greasemonkey)에서만 사용할 수 있는 애플리케이션을 만들고 싶다면 firefox3.5 웹킷 지원이면 충분합니다.

    주류 플랫폼을 무시할 수 없다면, 우아하게 저하시키거나 호환 가능한 인터페이스를 구현하기 위해 다른 방법을 선택할 수 있는 기술이 많이 있습니다.

    예를 들어 IE를 기다릴 수 없다면 ES5 객체의 상속 및 액세스 제어가 ES4/ActionScript3 기간(클래스는 개인 정적 정적 확장)의 구식 키워드에서 Object.create(p)로 변경되었습니다. , attrs).defineProperty(o, n, attrs).defineProperties( o, attrs).freeze().getOwnPropertyNames().map(fn), 단지 멋을 위한 것이 아닙니다...

    많은 사람들이 "평생 HTML5를 사용해 본 적이 없다"고 불평하기를 좋아하지만, 발 밑에 있는 큰 손바닥에서 눈을 떼고 다른 곳을 바라보는 한 세상은 실제로 변하고 있다는 것을 알게 될 것입니다. 언제나 XD

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 마이크로포맷 및 관련 속성 names_html5 튜토리얼 팁다음 기사：HTML5 마이크로포맷 및 관련 속성 names_html5 튜토리얼 팁

관련 기사

더보기