Leon's blog

每天活的有趣一点

正在浏览标签为 css 的文章

前端开发调试工具非常方便,Firefox下有Firebug,Google Chrome和Safari下有Web inspector。 但是手机上的浏览器调试一直还没有特别好的工具。随着iOS 6的退出,这一现象得到了很大的改变。现在可以通过桌面Safari的Web inspector直接调试,iOS 6上浏览器里的网页内容了,几乎跟调试桌面浏览器里的页面一样快,一样方便。唯一的遗憾是,似乎还只有Mac下的Safari 6支持这个功能,Windows下的Safari版本还不行。也许这也是Apple促销Mac的一个手段吧。

调试iOS 6上浏览器里的页面的具体步骤如下

  1. 在iOS 6上的Safari设置里开启Web inspector选项。并把设备通过数据线连接到Mac。

iOS 6 Safari inspector-1

  1. 打开Mac上的桌面Safari,在Develop菜单下将会出现连接了的iOS 6设备。选择这个设备下要调试的页面。

iOS 6 Safari inspector-2

  1. 在桌面Web inspector上选取Html元素,手机上将高亮显示

iOS 6 Safari inspector-3

  1. 当然除了高亮显示,其他修改、查看页面加载过程,调试Javascript等一样也不少

iOS 6 Safari inspector-4

update

lesscss 初学注意事项

抢沙发

less的嵌套

less支持嵌套,而且习惯上使用嵌套时使用缩进。但是嵌套的语法还是使用{},而不是缩进。所以下面的写法是错误的。

.classA {
    display: block;
    }
    .classB {
        display: none;
    }
//生成的css如下
.classA {
  display: block;
}
.classB {
  display: none;
}

正确的写法是

.classA {
    display: block;
    .classB {
        display: none;
    }
 }
//生成的css如下
.classA {
  display: block;
}
.classA .classB {
  display: none;
}

串联选择器

默认情况下less嵌套生成的是后代选择器。如果要生成串联选择器,一定记得要在前面加上&符号。这对伪类尤其有用如 :hover:focus。这点我搞错了好几次。例如:

.button{
    background-color: #aaa;
    :hover{ //实际上是对所有的页面元素的hover进行了设置
        background-color: #ccc;
    }
}
//生成的css如下:
.button {
  background-color: #aaa;
}
.button :hover {
  background-color: #ccc;
}

正确的写法是:

.button{
    background-color: #aaa;
    &:hover{
        background-color: #ccc;
    }
}
//生成的css如下:
.button {
  background-color: #aaa;
}
.button:hover {
  background-color: #ccc;
}

可以使用less直接计算像素

开始我以为要使用变量,计算好数值以后,再拼上px来生成像素属性。折腾了半天,语法还不太对。其实less是可以方便的直接计算像素属性的。例如:

@w : 100px;
.classA {
    width: @w;
    height: @w/2;
    margin-left: -@w/10;
}
//生成的css如下
.classA {
  width: 100px;
  height: 50px;
  margin-left: -10px;
}

less还把这个特性进一步深入,支持一些HSL的颜色操作函数。如:lighten/darken/saturate/desaturate/fadein/fadeout/spin

less样式文件一定要在引入less.js前先引入

如果你现在在浏览器里生成css,除了引入.less文件的时候要设置rel属性设置为stylesheet/less,记住紧接着要加载less.js

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

参考文档

昨天为了看SlideShare比较清爽些,刚弄了个改变SlideShare ppt缺省大小的Bookmarklet,没想到今天就看到SlideShare在测试更大的ppt画面的新UI设计, bigfoot.
slideshare_bigfoot_01

我马上去试了一下,还是不太满意: ppt大小是固定大小(728x562px), 广告位还是很多.
slideshare_bigfoot_02

最后我还是bigfoot关掉了,继续使用这个小Bookmarklet.

SlideShare是个很好的资料网站,那里你总能找到符合你胃口的的ppt.
可惜缺省的ppt大小比较小(598×481),有的时候连字也看不清楚.切换成全屏吧,又太招摇,桌面上的消息也不太容易看到.
如果提供个大一点的ppt选项就好了,这就是下面这段Bookmarklet的由来.把拖到浏览器的收藏夹,以后你在SlideShare上看ppt的时候,单击一下这个Bookmarklet,就会把广告什么的隐藏掉了,ppt的宽度大概是屏幕宽度的70%.

javascript: (function() {   
    var rz = function() {
        var h = $(window).width() * 3 / 6;
        h = h + "px";
        $(".player").css("min-width", "400px").css("width", "100%").css("height", h);
        $(".column1, .playerWrapper, .player, .slideDisplayer").css("width", "100%").css("height", h);        
        $(".playerWrapper").attr('style', 'width: 100% !important');
        $("#player").attr('width', $(".player").width()).attr('height', $(".player").height())
    };
    $(".h-top-ad, .h-skyscraper-ad, .h-related-more-tab").css("display", "none");
    $(window).bind('resize', rz);
    rz();    
})();
void 0

这是点击前和点击后的展示效果:
slideshare with ad

slideshare without ad

讨厌的CSS3前缀

已有 3 条评论

CSS3确实带来了很多很炫的功能,但是为了在现在的浏览器上使用CSS3确实很费劲.
比如要为不同的浏览器书写自己格式的CSS3属性名就是一件麻烦事.
他们为什么不直接使用标准的CSS3属性名呢?!

如果要把元素旋转度,CSS3的语法是:

transform:rotate(-3deg);

却要写这么多:

   -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
   -moz-transform:rotate(-3deg); /*为Firefox*/
   -ms-transform:rotate(-3deg); /*为IE*/
   -o-transform:rotate(-3deg); /*为Opera*/
   transform:rotate(-3deg); /*为nothing*/

真是够丑的,谁有好办法?