modernizr | 易学教程

Modernizr - Correct way of loading polyfills / using custom detects

阅读更多关于 Modernizr - Correct way of loading polyfills / using custom detects

问题 I want to use some new HTML5 form attributes and input types on a webpage. Some browsers already support them, others don't and never will. Thats why I want to use Modernizr - and thats were my trouble begins. To my understanding, Modernizr alone is not a polyfill but a script that can test if the browser is capable of some new HTML5 / CSS3 stuff. If necessary, a polyfill can be loaded which "emulates" these features so they can be used in non-supporting / older browsers. This is correct I

《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第二节：MVC5项目结构

阅读更多关于《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第二节：MVC5项目结构

第一境 ASP.Net MVC5项目初探 — 第二节：MVC5项目结构接下来，我们来看看，VS为我们自动创建的项目，是什么样子的？可以通过菜单中[View]->[Solution Explorer]项来打开解决方案资源管理器。这是一个树形结构的视图，根节点是解决方案，解决方案节点下，就是一个一个的项目了，目前，我们的解决方案里只有一个项目（HonorShop.Web）。接下来，展开（HonorShop.Web）项目节点，概要介绍一下几个重要的目录和文件： App_Data：顾名思义，用来放置应用程序相关数据文件的目录； App_Start：这里边，默认有三个Config文件，都很重要，以后会经常用到 BundleConfig.cs：Bundling是MVC提供的一种对静态文件（如：JS脚本、样式表）进行优化的机制； FilterConfig.cs：就是用来注册过滤器的。什么是过滤器？有什么用？怎么工作的？我们在后续章节中进行详细讲解； RouteConfig.cs：配置MVC应用的路由；说它们重要，自然是有道理的，因为我们后面会经常用到他们。 Content：用来放置一些静态资源（样式表、图片、音频、视频文件等）。VS默认生成了一个Site.css和Bootstrap框架样式表文件； Scripts：也是用来放置静态资源，但主要是脚本文件。VS默认放置了bootstrap

Foundation 起步介绍

阅读更多关于 Foundation 起步介绍

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。什么是 Foundation？ Foundation 是一个免费的前端框架，用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。 Foundation 移动优先，可创建响应式网页。 Foundation 适用于初学者和专业人士。 Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。什么是响应式网页设计？响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。从哪里下载 Foundation? 你可以通过以下两种方式来获取 Foundation： 1、从官网下载最新版本：http://foundation.zurb.com/。 2、使用菜鸟教程官网提供的CDN（推荐）：  <link rel

HTML5 Web存储（localStorage与sessionStorage）

阅读更多关于 HTML5 Web存储（localStorage与sessionStorage）

HTML5 提供了两种在客户端存储数据的新方法：localStorage与 sessionStorage. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie 速度很慢而且效率也不高。简单的说本地存储是HTML5的一部分。更为详细准确的说是本地存储过去是HTML5的标准中的一部分，而后来由于有些工作组的人表示HTML5太庞大了，于是就剥离出来作为一个单独的标准。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用JavaScript来存储和访问数据

Tests for “preserve-3d” are not working on Android (via Browserstack)?

阅读更多关于 Tests for “preserve-3d” are not working on Android (via Browserstack)?

问题 Android is supposed to support css 3d transforms completely since version 3.0 according to caniuse.com. When I run one of the tests below (e.g. on Android 4.1, Samsng Galaxy), they return true. However, when I view a page that uses 3d transforms and preserve-3d it doesnt’t work. For example: http://jsfiddle.net/bartaz/e3Rjz/show/ Test 1: (function(Modernizr, win){ Modernizr.addTest('csstransformspreserve3d', function () { var prop = Modernizr.prefixed('transformStyle'); var val = 'preserve-3d

Feature detect if user gesture is needed

阅读更多关于 Feature detect if user gesture is needed

问题 is there a way to detect if calling play() on a video element is allowed without a user gesture? On Android Chrome this warning is given: Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture. So on Chrome Android a user gesture is required to start the playback of a video, while it isn't on desktop Chrome. Is there a way to detect which behavior I will get? I want to have slightly different behavior in my app depending on if calling play programatically

Feature detect if user gesture is needed

阅读更多关于 Feature detect if user gesture is needed

Using modernizr with css classes that use more than one css3 style?

阅读更多关于 Using modernizr with css classes that use more than one css3 style?

问题 I am using modernizr to create alternative styles for browsers that don't support css3. It works great but i haven't found a solution with css classes that use more than one css3 style. Example 1: div.button { box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */ border-radius: 5px; /* second css3 style */ } /* fallback for browsers that don't support css3 */ .no-borderradius div.button { background: transparent url(my-button.png) left top; } The problem here is if the browser does

Modernizr.load callback executing before loaded script

阅读更多关于 Modernizr.load callback executing before loaded script

问题 At a certain point on my javascript I have the following (using Modernizr 2.6.2): Modernizr.load([{ load: '/path/file.js', complete: function () { //do stuff } }]); It works great most of the time, except on IE8, about 1 time out of 3 it executes the callback first then the script being loaded. I am adding a break point on the callback and another inside file.js. Both scripts are being executed, just swapping the order at times. I tried to isolate and reproduce the error, but I couldn't. It

How to test for css properties like modernizr.js

阅读更多关于 How to test for css properties like modernizr.js

问题 I would like to test if a browser supports a CSS property. I know I can use modernizr to do this but I don't want to install an entire library to test for one property. How does modernizr test for properties? Say I want to test for support for the background-size property. I scanned through the properties of the document object but couldn't see anything that looked like it would help. Any ideas or help would be great. 回答1: Modernizr works by creating an element, applying a css property and

订阅 modernizr