分类 HTML&CSS 下的文章

prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕。

有了浏览器缓存,为何还需要预加载?
用户可能是第一次访问网站,此时还无缓存
用户可能清空了缓存
缓存可能已经过期,资源将重新加载
用户访问的缓存文件可能不是最新的,需要重新加载
Chrome 的预加载技术
现在的 chrome 聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了。
举个栗子,当你在搜索框输入 "amaz" 时,它猜测到你可能要访问 amazon.com,可能就帮你加载了这个网站的一些资源。
如果这个预测算法精准的话,就能大大地提高用户的浏览体验了。

DNS prefetch
我们知道,当我们访问一个网站如 www.amazon.com 时,需要将这个域名先转化为对应的 IP 地址,这是一个非常耗时的过程。

DNS prefetch 分析这个页面需要的资源所在的域名,浏览器空闲时提前将这些域名转化为 IP 地址,真正请求资源时就避免了上述这个过程的时间。






应用场景1:我们的资源存在在不同的 CDN 中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行 DNS-Prefetch,加强用户体验。

Resource prefetch
在 Chrome 下,我们可以用 link标签声明特定文件的预加载:



在 Firefox 中或用 meta 标签声明:

rel='subresource' 表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。

rel='prefetch' 表示当 subresource 所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。

注意:只有可缓存的资源才进行预加载,否则浪费资源!

Pre render
前面说到的预解析DNS、预加载资源已经够强悍了有木有,可还有更厉害的预渲染(Pre-rendering)!

预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!

在 Firefox 中或用 rel='next' 来声明

不是所有的资源都可以预加载
当资源为以下列表中的资源时,将阻止预渲染操作:

URL 中包含下载资源
页面中包含音频、视频
POST、PUT 和 DELETE 操作的 ajax 请求
HTTP 认证(Authentication)
HTTPS 页面
含恶意软件的页面
弹窗页面
占用资源很多的页面
打开了 chrome developer tools 开发工具
手动触发预渲染操作
在 head 中强势插入 link[rel='prerender'] 即可:

var hint =document.createElement("link")
hint.setAttribute(“rel”,”prerender”)
hint.setAttribute(“href”,”next-page.html”)
document.getElementsByTagName(“head”)[0].appendChild(hint)
兼容性
这么好用的特性,当然要考虑各浏览器的兼容程度了(哭:

IE9 支持 DNS pre-fetching 但管它叫 prefetch。

IE10+ 中 dns-prefetch 和 prefetch 是等价的。

其他方面的测试,目前还没有很好的方案,暂且只能通过查看浏览器是否缓存来测试。

在 Chrome 中打开了 chrome developer tools 开发工具会阻止页面的预渲染,所以我们看不到这个过程,但可以在 chrome://cache/ 或 chrome://net-internals/#prerender 中查看。

Firefox 可以在 about:cache 中查看。

作者:赖小赖小赖
链接:https://www.jianshu.com/p/7f58ddfc1392
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

1.什么是 CSS hack:
由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,在不同的浏览器中也能得到我们想要的页面效果,这就叫CSShack。也可以反过来利用CSShack为不同版本的浏览器定制编写不同的CSS效果。CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

2.谈一谈浏览器兼容的思路
1.考虑要不要做浏览器兼容。一是从产品的角度来考虑,包括产品的受众、受众的浏览器比例、效果优先还是基本功能优先等方面。所做的网站用户是谁,用户用什么浏览器,网站特性需求如何。二是从成本的角度考虑有没有必要做某件事,成本复杂没多少必要就不必做。
2.要做浏览器兼容的话做到什么程度,让哪些浏览器支持哪些效果,定好兼容范围。比如要兼容到IE的哪个版本。
3.确定好以上问题后,考虑如何做。一是根据兼容需求选择技术框架/库,包括一些JS库,UI库或其它工具。比如页面要兼容到IE6或7一般选择jquery一点几的版本。二是根据兼容需求选择兼容工具,如html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS等,利用兼容工具实现目标,简化工作流程;三是根据自己的情况使用条件注释、CSS Hack、js 能力检测等做一些修补。

3.列举5种以上浏览器兼容的写法
1.属性前缀法(即类内部Hack)是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。 例如 IE6能识别下划线"_"和星号" ",IE7能识别星号" ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识;例如:

.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67*/
color: yellow\9; /ie/edge 6-8/
}

2.选择器前缀法(即选择器Hack)是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack;前最常见的是:

html 前缀只对IE6生效 ;
+html +前缀只对IE7生效 ;
@media screen\9{...}只对IE6/7生效 ;
@media \0screen {body { background: red; }}只对IE8有效 ;
@media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效 ;
@media screen\0 {body { background: green; }} 只对IE8/9/10有效 ;
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 ;
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效 ;

3.IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本:。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效;例如:

<!–-[if IE 7]><![endif]–->

4.条件注释结合类选择器整体优化。
5.-webkit- ,针对safari,chrome浏览器的内核CSS写法;
-moz-,针对firefox浏览器的内核CSS写法;
-ms-,针对ie内核的CSS写法;
-o-,针对Opera内核的CSS写法;
6.利用Modernizr工具。可以直接使用Modernizr在元素里生成的class名称,在你的css文件里定义相应的属性以便支持当前浏览器。

4.以下工具/名词是做什么的
条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。使用了条件注释的页面在 IE9及以下中可正常工作,但在 IE10及以上中无法正常工作。
! [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
IE Hack

针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程。
js 能力检测
使用JS的语法检测浏览器支持的属性,以便展示效果给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。要让低版本的浏览器即IE9以下的浏览器支持,html5shiv.js是一个非常好的选择。
respond.js
Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width特性,实现响应式网页设计。
css reset
在HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式覆盖浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉,这就是CSS reset。
normalize.css
Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。不同的浏览器在对于CSS没有定义的一些样式属性是不一样的,这个CSS的功能就是对几乎所有的默认样式进行重置,让所有的浏览器上对于未定义的样式浏览效果达到一致(虽然说无法完全一致,但至少可以消除掉大部分差距)。它保留有用的默认值,不同于许多 CSS 的重置标准化的样式,适用范围广的元素。纠正错误和常见的浏览器的不一致性。一些细微的改进,提高了易用性。使用详细的注释来解释代码。
Modernizr
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。通过这个库我们可以检测不同的浏览器对于HTML5特性的支持情况。Modernizr 会在页面加载后立即检测特性,然后创建一个包含检测结果的JavaScript 对象,同时在 html元素中加入方便你调整 css 的 class 名。
postCSS
PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。PostCSS使CSS变成JavaScript的数据,使它变成可操作。PostCSS是基于JavaScript插件,然后执行代码操作。它可以直观地理解为一个平台,可以让一些插件在上面跑,它提供了一个解析器,可以将CSS解析成抽象语法树,通过PostCSS,我们能够开发一些插件,来处理CSS。

瀑布流提供了一种错落有致的美观布局,被各种注重交互品味的素材网站(如:花瓣、unsplash)广泛应用。社区也提供了不少瀑布流布局的工具,如:masonry 、colcade 等。常规的实现瀑布流的做法是用 JS 动态的计算“砖块”的尺寸和位置,计算量大、性能差。今天给大家介绍一种使用纯 CSS 实现瀑布流的方法,简洁优雅。主要使用到了 CSS 中的多列属性 columns。

在使用一个比较陌生的 CSS 属性之前,习惯性的了解一下它的兼容性,去 caniuse.com 瞅一眼:

看着兼容性还不错,那就放心的用吧。

HTML
先构造页面结构:

Title Goes Here

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum quidem?

...more...


在 div.masonry 容器中可以塞进任意多的 “砖块” div.item,“砖块” 中的图片可以从 unsplash 中随机获取,且可以制定图片的尺寸。

CSS
容器:

.masonry {
width: 1440px; // 默认宽度
margin: 20px auto; // 剧中
columns: 4; // 默认列数
column-gap: 30px; // 列间距
}
砖块:

.item {
width: 100%;
break-inside: avoid;
margin-bottom: 30px;
}

.item img {
width: 100%;
}

.item h2 {
padding: 8px 0;
}

.item P {
color: #555;
}
上面的样式其他都挺好理解,唯独 break-inside 这个属性比较陌生。让我们看一下去掉 break-inside 之后会有什么问题吧:

可以看到有两个“砖块”的文字跑到上面和图片分开了。所以当设置了 break-inside: avoid 之后可以避免“砖块”内部的内容被断开。

不同屏幕尺寸适配
以上样式默认适配 PC,在其他尺寸设备上需要重新设置列数、列间距等样式,可以通过 media query 进行适配,比如:

ipad pro:

@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
.masonry {

width: 96vw;
columns: 3;
column-gap: 20px;

}
}
ipad:

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
.masonry {

width: 96vw;
columns: 2;
column-gap: 20px;

}
}
mobile:

@media screen and (max-width: 767.98px) {
.masonry {

width: 96vw;
columns: 1;

}
}
注意:屏幕尺寸区间不要有交集,也不要有缺口!
好了,大功告成,来张全家福!

本文转载自:https://zhuanlan.zhihu.com/p/157329149

只允许输入正整数:

<input type='text' onkeyup="this.value=this.value.replace(/^(0+)|[^\d]+/g,'')">

只允许输入英文:

<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
    

只允许允许输入数字和字母:

<input onKeyUp="value=value.replace(/[\W]/g,'')">

允许输入大小写字母、数字、下划线:

<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');">

允许输入小写字母、数字、下划线:

<input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');">

允许输入数字和小数点:

<input type="text" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')">

允许输入中文、数字、英文:

<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">