- 浏览: 796904 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (651)
- Java (39)
- Java 初学者小问题 (66)
- 设计模式 (7)
- 项目管理 (3)
- 数据库 (1)
- 算法 (2)
- Java practices (6)
- Effective Java2读书笔记 (78)
- Linux (2)
- programming ruby 读书笔记 (5)
- Core Java Ninth Edition Volume I 读书笔记 (15)
- Pro Git 读书笔记 (12)
- Git (3)
- Maven in Action 读书笔记 (20)
- Web (12)
- 非技术类书籍 (11)
- 电影 (40)
- Web Cache (1)
- jquery (0)
- 历史 (4)
- Dive Into HTML5 读书笔记 (13)
- 三国演义小学毕业考 (79)
- 高效能人士的7个习惯 读书笔记 (12)
- Java Performance 读书笔记 (3)
- Protocol Buffer 学习笔记 (6)
- Mongo DB 学习笔记 (7)
- Morphia 学习笔记 (7)
- Algorithms -- Princeton 学习笔记 (13)
- String研究 (10)
- Hadoop: The Definitive Guide 读书笔记 (3)
- Java与模式读书笔记 (5)
- Date研究 (3)
- The Roman Empire 听课笔记 (4)
- Algorithms -- Standford 学习笔记 (16)
- Core Java Ninth Edition Volume II 读书笔记 (9)
- Thinking in Java 4th Edition 读书笔记 (21)
- Node : Up and Running 学习笔记 (5)
- Eloquent Javascript (8)
- Smashing Node.js 读书笔记 (1)
- Algorithms II -- Standford 学习笔记 (19)
- Algorithm II -- Princeton 学习笔记 (14)
- 网络安全 (2)
- Javascript (4)
- 正则表达式 (1)
- JAVA 7/8 (15)
- JVM (10)
- NodeJS (1)
- 鸟哥的linux私房菜读书笔记 (14)
- Web Service (1)
- The art of programming (9)
- Introduction to Algorithm 读书笔记 (4)
- Java 源码阅读 (0)
- Spring in Action 读书笔记 (2)
- Java Network Programming 读书笔记 (2)
最新评论
-
心存高远:
谢谢作者分享,刚好看到这里不太明白,现在茅塞顿开。不过runt ...
关于 Maven的传递依赖的理解 -
sxlkk:
851228082 写道甚至在某次技术会议现场遇到《Maven ...
关于 Maven的传递依赖的理解 -
851228082:
851228082 写道a----compile----b-- ...
第五章 坐标和依赖 -
851228082:
a----compile----b-----provided- ...
第五章 坐标和依赖 -
851228082:
甚至在某次技术会议现场遇到《Maven in action》的 ...
关于 Maven的传递依赖的理解
1. There are four basic techniques for detecting whether a browser supports a particular feature:
a) C heck if a certain property exists on a global object
b) Create an element, then check if a certain property exists on that element.
c) Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
d) Create an element, set a property to a certain value, then check if the property has retained its value.
2. Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. Modernizr runs automatically when you include its javascript library in your page and when it runs, it creates a global object called Modernizr , that contains a set of Boolean properties for each feature it can detect.
3. HTML5 defines the <canvas> element as “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations.
4. I
f your browser supports
the canvas API, the DOM object it creates to represent a
<canvas>
element will have a getContext()
method. If your browser
doesn’t support the canvas API, the DOM object it creates for a
<canvas>
element will only have the set of common properties, but not
anything canvas-specific:
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
5.
Even if your browser
supports the canvas API
,
it might not support the canvas text
API.
If your browser supports the canvas tesxt API, the DOM object it creates to
represent a
<canvas>
element will have the getContext()
method and the object
returned from getContext(‘2d’)
will have a fillText
function:
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}
6.
HTML5 defines a new element
called
<video>
for embedding video in your web pages. The
<video>
element is designed to be usable without any detection scripts. You
can specify multiple video files, and browsers that support HTML5 video will
choose one based on what video formats they support. Browsers that don’t
support HTML5 video will ignore the
<video>
element
completely.
7. If
your browser supports HTML5
video, the DOM object it creates to represent a
<video>
element
will have a canPlayType()
method. If your browser doesn’t support HTML5
video, the DOM object it creates for a
<video>
element
will have only the set of properties common to all elements:
function supports_video() {
return !!document.createElement('video').canPlayType;
}
8. Browsers can’t agree on a single codec. However, they seem to have narrowed it down to two. One codec costs money (because of patent licensing), but it works in Safari and on the iPhone. (This one also works in Flash if you use a solution like Video for Everybody! ) The other codec is free and works in open source browsers like Chromium and Mozilla Firefox .
9. The following function checks for the patent-encumbered format supported by Macs and iPhones:
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
In technical terms, you’re asking the browser whether it can play H.264 Baseline video and AAC LC audio in an MPEG-4 container.
The following function checks for the open video format supported by Mozilla Firefox and other open source browsers:
function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}
In technical terms, you’re asking the browser whether it can play Theora video and Vorbis audio in an Ogg container.
WebM is a newly open-sourced (and non-patent-encumbered) video codec that will be included in the next version of major browsers, including Chrome, Firefox , and Opera . You can check the support of WebM like :
function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}
10. The canPlayType() returns a string:
- "probably" if the browser is fairly confident it can play this format
- "maybe" if the browser thinks it might be able to play this format
- "" (an empty string) if the browser is certain it can’t play this format
11.
HT
ML5
storage
provides a way for web sites to store information on your computer and retrieve
it later. If your browser supports HTML5
storage, there will be a
localStorage
property on the global
window
object. If your browser doesn’t support HTML5
storage,
the
localStorage
property will be undefined. Due to an unfortunate bug in older
versions of Firefox, this test will raise an exception if cookies are disabled,
so the entire test is wrapped in a try..catch
statement.
function supports_local_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
return false;
}
}
12. Web Workers provide a standard way for browsers to run JavaScript in the background. These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing. If your browser supports the Web Worker API, there will be a Worker property on the global window object. If your browser doesn’t support the Web Worker API, the Worker property will be undefined.
function supports_web_workers() {
return !!window.Worker;
}
13. Offline web applications start out as online web applications. The first time you visit an offline-enabled web site, the web server tells your browser which files it needs in order to work offline. These files can be anything — HTML , JavaScript, images, even videos . Once your browser downloads all the necessary files, you can revisit the web site even if you’re not connected to the Internet. Your browser will notice that you’re offline and use the files it has already downloaded. When you get back online, any changes you’ve made can be uploaded to the remote web server.
14.
If your browser supports offline web applications, there will be an
applicationCache
property on the global
window
object. If your
browser doesn’t support offline web applications, the
applicationCache
property will be undefined:
function supports_offline() {
return !!window.applicationCache;
}
15.
Geolocation
is the art of figuring out where you are in the world and (optionally) sharing
that information with people you trust. If your browser supports the
geolocation API
, there will be a
geolocation
property on
the global
navigator
object. If your browser doesn’t support the geolocation API
,
the
geolocation
property will not be present inside of
navigator
:
function supports_geolocation() {
return 'geolocation' in navigator;
}
16. HTML5 defines over a dozen new input types that you can use in your forms.
a) <input type="search"> for search boxes
b) <input type="number"> for spinboxes
c) <input type="range"> for sliders
d) <input type="color"> for color pickers
e) <input type="tel"> for telephone numbers
f) <input type="url"> for web addresses
g) <input type="email"> for email addresses
h) <input type="date"> for calendar date pickers
i) <input type="month"> for months
j) <input type="week"> for weeks
k) <input type="time"> for timestamps
l) <input type="datetime"> for precise, absolute date+time stamps
m) <input type="datetime-local"> for local dates and times
17.
You can
check the support of new input types in the following way: create a dummy
<input>
element in memory. The default input type for all
<input>
elements is
"text
"
. Set the
type
attribute on the dummy
<input>
element
to the input type you want to detect. If your browser supports that particular
input type, the
type
property will retain the value you set. If your browser doesn’t
support that particular input type, it will ignore the value you set and the
type
property will still be
"text
"
.
18. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon you click on (or tab to) the input field, the placeholder text disappears. If your browser supports placeholder text in input fields, the DOM object it creates to represent an <input> element will have a placeholder property:
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
19.
The
autofocus
attribute moves the focus to a particular input field. But because it’s just markup
instead of a script, the behavior will be consistent across all web sites. Also,
browser vendors (or extension authors) can offer users a way to disable the
autofocusing behavior. f your browser supports autofocusing web form controls,
the DOM
object it creates to represent an
<input>
element will have an
autofocus
property:
function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}
20.
Microdata
is a standardized way to provide additional semantics in your web pages. If
your browser supports the HTML5
microdata API
, there
will be a
getItems()
function on the global
document
object. If
your browser doesn’t support microdata, the
getItems()
function
will be undefined:
function supports_microdata_api() {
return !!document.getItems;
}
21.
The HTML5
history API
is a standardized way to manipulate the browser
history via script. If your browser supports the HTML5
history API
,
there will be a
pushState()
function on the global
history
object. If your
browser doesn’t support the history API
, the
pushState()
function will be undefined:
function supports_history_api() {
return !!(window.history && history.pushState);
}
发表评论
-
《Dive into HTML5》 读后感
2012-06-20 07:57 1516读这本书的起因是参加了2012年的Qcon,对其中某个 ... -
Manipulating History for Fun & Profit
2012-06-20 07:29 10591. The HTML5 history AP ... -
“Distributed,”“Extensibility,”& Other Fancy Words
2012-06-15 15:54 8971. Microdata annotates t ... -
A Form of Madness
2012-06-11 10:41 9721. Placeholder text is d ... -
Let’s Take This Offline
2012-06-09 23:32 9401. An offline web app ... -
A Place To Put Your Stuff
2012-06-09 17:55 9371. Cookies have three po ... -
You Are Here (And So Is Everybody Else)
2012-06-09 16:06 11181. Geolocation is the ar ... -
Video in a Flash (Without That Other Thing)
2012-06-08 15:46 11241. HTML5 defines a standard wa ... -
Let’s Call It A Draw(ing Surface)
2012-06-06 17:19 11921. HTML 5 defines the &l ... -
What Does It All Mean?
2012-06-03 19:23 10871. In Activating Browse ... -
A Quite Biased History of HTML5
2012-05-23 20:02 10881. “content type” or “MIM ... -
Introduction: Five Things You Should Know About HTML5
2012-05-22 15:23 10141. HTML5 is a collectio ...
相关推荐
In this book, we’ll talk about the history of HTML and HTML5 and explore its new features. It covers: HTML5 basics Multimedia Canvas and SVG HTML5 applications HTML5 APIs HTML5 is required ...
- **Using the Modernizr Library**: Mentioned as a JavaScript library that tests for HTML5 and CSS3 features, providing a fallback mechanism for unsupported features. - **Filling the gaps with ...
- **Creating Backward Compatibility**: Techniques for ensuring that games built with HTML5 work on older browsers or devices that do not support all features. - **Feature Detection**: How to check if...
Chapter 5: Rich Imaging; 5.1 Imaging in Silverlight; 5.2 Using Deep Zoom with Silverlight; 5.3 Using Photosynth with Silverlight; 5.4 Key Points; Chapter 6: Media, Webcams, and Video; 6.1 Media in ...
This is ideal for detecting changes in different versions of source code or web pages. You can even use the efficient byte-by-byte comparison option to verify the contents of recordable cds or usb ...
This is ideal for detecting changes in different versions of source code or web pages. You can even use the efficient byte-by-byte comparison option to verify the contents of recordable cds or usb ...
As of Internet Explorer 5, conditional comments are available as an alternative technique for detecting browser versions. Conditional comments have the advantage of not using a script block, which ...
Detecting Changes in Servlet Context Attributes Section 6.4. Example: Monitoring Changes to Commonly Used Data Section 6.5. Packaging Listeners with Tag Libraries Section 6.6. Example: Packaging ...
Detecting Changes in Servlet Context Attributes Section 6.4. Example: Monitoring Changes to Commonly Used Data Section 6.5. Packaging Listeners with Tag Libraries Section 6.6. Example: Packaging ...
retrieved and SendMessage is a boolean function (maybe someone has pressed the cancel btn).- Fixed a bug when the subject field is too large.9/2/981.5.1- Fixed a bug with a message within a message ...
当前大多数搞机器人开发的用户所装的ROS是indigo版本,而且是基于Ubuntu14.04的。如果你跑别的版本的rbx代码老出错,不用怀疑,就是代码版本问题!ros by example for indigo volume 1很多地方(包括CSDN)都可以...
9.3.1 Monitoring and Fixing Errors ...............................350 9.3.2 Alex King’s 404 Notifier Plugin .....................................................351 9.3.3 Broken Link Checker Plugin ....