分类 笔记 下的文章

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, '')">

/**

  • 和PHP一样的时间戳格式化函数
  • @param {string} format 格式
  • @param {int} timestamp 要格式化的时间 默认为当前时间
  • @return {string} 格式化的时间字符串
    */

function date(format, timestamp){

var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());
var pad = function(n, c){
    if((n = n + "").length < c){
        return new Array(++c - n.length).join("0") + n;
    } else {
        return n;
    }
};
var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"};
var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var f = {
    // Day
    d: function(){return pad(f.j(), 2)},
    D: function(){return f.l().substr(0,3)},
    j: function(){return jsdate.getDate()},
    l: function(){return txt_weekdays[f.w()]},
    N: function(){return f.w() + 1},
    S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'},
    w: function(){return jsdate.getDay()},
    z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0},
    // Week
    W: function(){
        var a = f.z(), b = 364 + f.L() - a;
        var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;
        if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){
            return 1;
        } else{
            if(a <= 2 && nd >= 4 && a >= (6 - nd)){
                nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");
                return date("W", Math.round(nd2.getTime()/1000));
            } else{
                return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);
            }
        }
    },
    // Month
    F: function(){return txt_months[f.n()]},
    m: function(){return pad(f.n(), 2)},
    M: function(){return f.F().substr(0,3)},
    n: function(){return jsdate.getMonth() + 1},
    t: function(){
        var n;
        if( (n = jsdate.getMonth() + 1) == 2 ){
            return 28 + f.L();
        } else{
            if( n & 1 && n < 8 || !(n & 1) && n > 7 ){
                return 31;
            } else{
                return 30;
            }
        }
    },
    // Year
    L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0},
    //o not supported yet
    Y: function(){return jsdate.getFullYear()},
    y: function(){return (jsdate.getFullYear() + "").slice(2)},
    // Time
    a: function(){return jsdate.getHours() > 11 ? "pm" : "am"},
    A: function(){return f.a().toUpperCase()},
    B: function(){
        // peter paul koch:
        var off = (jsdate.getTimezoneOffset() + 60)*60;
        var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;
        var beat = Math.floor(theSeconds/86.4);
        if (beat > 1000) beat -= 1000;
        if (beat < 0) beat += 1000;
        if ((String(beat)).length == 1) beat = "00"+beat;
        if ((String(beat)).length == 2) beat = "0"+beat;
        return beat;
    },
    g: function(){return jsdate.getHours() % 12 || 12},
    G: function(){return jsdate.getHours()},
    h: function(){return pad(f.g(), 2)},
    H: function(){return pad(jsdate.getHours(), 2)},
    i: function(){return pad(jsdate.getMinutes(), 2)},
    s: function(){return pad(jsdate.getSeconds(), 2)},
    //u not supported yet
    // Timezone
    //e not supported yet
    //I not supported yet
    O: function(){
        var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);
        if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
        return t;
    },
    P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))},
    //T not supported yet
    //Z not supported yet
    // Full Date/Time
    c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()},
    //r not supported yet
    U: function(){return Math.round(jsdate.getTime()/1000)}
};
return format.replace(/[\\]?([a-zA-Z])/g, function(t, s){
    if( t!=s ){
        // escaped
        ret = s;
    } else if( f[s] ){
        // a date function exists
        ret = f[s]();
    } else{
        // nothing special
        ret = s;
    }
    return ret;
});

}