All posts in CSS

flex-box布局上下分栏

By Fyn on Leave a Comment
.testbox{
  position: relative;
  height:300px;
  border: 4px solid green;
  width: 400px;
}
.flex-rows {
  display: flex;
  flex-direction: column;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.flex-rows nav{
  background-color: #ccc;
}
.flex-rows article {
  background-color: #cdc;
  height:100%;
  position: relative;
}
.flex-rows article > .scrollview {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow: auto;
}
<div class="testbox">
  <div class="flex-rows">
    <nav>
      Nav.... height:auto
    </nav>
    <article>
      <div class="scrollview">
        <ol>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
        </ol>
      </div>
    </article>
  </div>
</div>

See the Pen flex-box布局上下分栏 by Fan Yanan (@fanyanan) on CodePen.light

JS/CSS判断是否是retina屏幕

By Fyn on Leave a Comment

JS：

if(window.devicePixelRatio > 1){
    //是retina屏幕
}

 

CSS:

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5) ,
screen and (-ms-min-device-pixel-ratio: 1.5) ,
screen and (-o-min-device-pixel-ratio: 1.5) ,
screen and (min-device-pixel-ratio: 1.5) {
    .test {
        /*是retina屏*/
    }
}

 

-webkit-mask

By Fyn on Leave a Comment

-webkit-mask的写法和background一样，效果是在background上添加一层蒙板，只能用mask的图片透明度影响background的透明度，无法影响background的rgb色值。

-webkit-mask: url(icon.png) -125px 0;
-webkit-mask-size: 150px 100px;
background: none orange;

CSS重新定义select样式（含下拉箭头）

By Fyn on Leave a Comment
先用appearance:none取消浏览器默认样式，再用多重背景定义背景色和箭头
select {
	@include appearance(none);
	@include background-image(inline-image("select_arrow.png"),linear-gradient(top, #ffffff 0%,#e8e8e8 100%));
	background-repeat: no-repeat, repeat-x;
	background-position: right center, right top ;
	background-size: auto 100%, 100% 100%;&nbsp;
}

 

CSS Hack 速查

By Fyn on Leave a Comment

建议：

以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已的情况下，采用 Hack 解决。

以下是我总结的HACK书写方法:

浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。

测试环境：windows系统;

（FF : firefox;    OP : opera;    SA : safari;    CH : chrome;    Y代表支持，    N代表不支持。）

标志符示例IE6IE7IE8IE9FFOPSACH
*.eq {*color:#000;}YY
_.eq {_color:#000;}Y
+.eq {+color:#000;}YY
–.eq {-color:#000;}Y
>.eq {>color:#000;}YY
\0.eq {color:#000\0;}YYY
\9.eq {color:#000\9;}YYYY
\9\0.eq {color:#000\0;}N\YY
:root .xx{xxx:xxx\9;}:root .eq {color:#a00\9;}Y
*+.eq {*+color:#000;}YY
标志符示例IE6IE7IE8IE9FFOPSACH
*-.eq {*-color:#000;}Y
*html*html .eq {color:#000;}Y
*+html*+html .eq {color:#000;}Y
html*html* .eq {color:#000;}YY
[;.eq {color:red;[;color:blue;}YYYY
html>bodyhtml>body .eq {color:blue;}YYYYYYY
html>/**/bodyhtml>/**/body .eq {color:blue;}YYYYYY
html/**/>bodyhtml/**/>body .eq {color:blue;}YYYYYYY
@media all and (min-width:0px){}@media all and (min-width:0px){.eq {color:#000;}}YYYYY
*:first-child+html*:first-child+html .eq {color:blue;}Y
标志符示例IE6IE7IE8IE9FFOPSACH
*:first-child+html{} *html*:first-child+html{} *html .eq {color:blue;}Y
@-moz-document url-prefix(){}@-moz-document url-prefix(){ .eq {color:blue;}}Y
@media screen and (-webkit-min-device-pixel-ratio:0){}@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}YY
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}Y
body:nth-of-type(1)body:nth-of-type(1) .eq {color:blue;}YYYYY

注意事项：

1、由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。

2、[;此种方式会影响后续样式，不可取。

3、\9\0并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。

4、当同时出现\0;*;_;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。

推荐写法：

demo:

.eq { color:#f00;/*标准浏览器*/ color:#f30\0;/*IE8,IE9,opera*/ *color:#c00;/*IE7及IE6*/ _color:#600;/*IE6专属*/ } 

:root .eq {color:#a00\9;}/*IE9专属*/ 

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/

@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/ 

@-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/