無標題文檔

黑白的国殇日

早上看到很多的站点都去了色,才了解到原来今天以及以后的三天都定为国殇日。随后,就接到上级的任务,将页面「去色」。

在这里和其他的同行说下,不要「偷懒」用 Explorer 的滤镜了,这样会使页面很慢而且只支持 Explorer。

在我负责的页面中,我用了个临时的 CSS 样式文件,将有颜色定义的全部 !important 了下( 规则见此 )。这对于已经被 结构化的 CSS 而言,并不困难而且不影响速度,恢复起来也容易。

图片那边是运营自己搞定了,不知道他们从那里搞来的一个软件,可以批量将图片去色。

OK,最后看下页面的效果。在这里赞一下 拍拍 ,他们的速度是最快的,而且非常有诚意的将样式和图片都去了色。

https://friable.rocks/_/2009_11_05/41425594b526.jpg

https://friable.rocks/_/2009_11_05/43341594e9c2.jpg

CSS2.1 的优先权图示

怿飞兄的新写的 Blog 《 详解 CSS 的优先权 》非常的精彩。对于 我这样的 CSS 菜鸟而言 ,真的可以用醍醐灌顶来形容。

个人认为 CSS 优先权是比较重要的概念,尤其在维护庞大的 CSS 样式时,就显得非常的有用(当然,在样式庞大复杂以后,而不得不采用优先权更改样式,这是种不可取的做法,应该避免出现这种情况)。

https://friable.rocks/_/2009_11_05/52824583ed77.jpg

为了方便大家(同时也是本人)理解,我在消化这篇文章时胡乱画了张图示,希望能起到抛砖引玉的作用(但愿不要误人子弟 - 访问大图 ,或者 打包下载 )。

怿飞的文章中 arthuridea 兄的问题

Javascript 修改元素的 CSS 时,如何确定其优先权

按照本人的理解,我在这里「喧宾夺主」,抢答一下(不对的地方,请各位指正)

Javascript 修改样式分两种,一种是修改元素的 style 属性、
还有一种是修改元素的 class 属性。style 属性就是上述的内
联样式,权限较高 +1,0,0,0;而 class 属性则遵循上述的优
先权。

别忘记 CSS Naked Day

http://naked.dustindiaz.com/img/naked-day-08.png

今年的 CSS Naked Day 似乎很多人都忘记了。而 去年的这个「节日」 甚至 淘宝网 都参加了。下面是其官方的一些介绍

The idea behind this event is to promote Web Standards. 
Plain and simple. This includes proper use of (x)html, 
semantic markup, a good hierarchy structure, and of 
course, a good 'ol play on words. It's time to show off
your <body>.

创办这个「活动」并不是为了好玩,而是提倡 Web 开发人员使用具有良好结构的 HTML 。当然,完全抛弃 CSS 呈现页面的默认样式,是需要「勇气」的。

本人认为,如果条件允许的话,建议有兴趣的都可以参加。例如本人的 Blog 「脱掉」 CSS 样式 以后,会是这个样子(看起来非常丑)。

https://friable.rocks/_/2009_11_05/638435599e43.jpg

作为对比,再贴张「正常」的

https://friable.rocks/_/2009_11_05/099235571cb4.jpg

如果不想浪费时间写相应的代码,可以使用官方提供的 PHP 函数(当然,也可以使用 Javascript 实现)。

<?php
function is_naked_day($d) {
    $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
    $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
    $z = date('Z') * -1;
    $now = time() + $z;    
    if ( $now >= $start && $now <= $end ) {
        return true;
    }
    return false;
}
?>

批量 CSS 压缩器

https://friable.rocks/_/2009_11_05/865695500f7d.jpg

上次讲 Web 页面优化 的时候,讲到前端的 CSS 和 Javascript 等文件需要尽量的压缩。参加公司的某项目也到了后期,也需要大量的脚本压缩处理。

于是,在中午吃饭的时候花了点时间,搞了这个 批量压缩 CSS 的小工具 (很久没有写 PHP 了,练个手)。

这个工具的用法很简单,只需要将需要压缩的 CSS 文件打包成 ZIP 格式的文件,然后上传就可以了。服务器端会自动处理压缩包内的 CSS 文件(其他文件会忽略),然后再将其打包回来供用户下载。

处理以后的 CSS 样式文件,将被去除注释、空格和回车。考虑到尽量保持功能的单一,所以我并没有考虑加入过多的选项。

此工具的地址如下

http://friable.rocks/css_compresser/

至于源代码,我会进一步完善以后发布出来,请大家保持关注。

别忘记清除浮动

很早的时候, 圆心 就告诫我,「要随时清楚浮动元素」。当时由于忙(也许这算不上是借口),我把他的话当作了耳边风。

今天偏偏在工作最为忙乱的时候,运营那边在添加数据时,发现页面乱了。幸好又是伟大的 圆心 同志帮我找到了这个老问题,并解决(大哥在上,请接受小弟一拜)。

总结下清除浮动的一般解决方案,更多的总结可以 看这里

用空标签清除

.clr {clear: both;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <p class="clr"></p>
</div>

使用 overflow 属性

#layout {overflow:auto; zoom:1;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

使用 :after (非 IE 浏览器)

#layout:after{
    display: block;
    clear: both; content: "";
    visibility:hidden; height: 0;
}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

注:使用 :after 需要注意几点,设置高度为零(height: 0;);content 是必须的,但其值可以为空。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHub (2) 、 TwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 其实无所谓叫什么名字,作为码农知道取名是件很难的事情。最后想到的这个名字,其实都没啥特别的含义,系统默认的文件名而已。

作为八零后,自认为还仅存点傲娇式的幽默感,以及对平淡生活的追求和向往。 为了免得对号入座和不必要的麻烦,声明本站点所持观点仅代表个人意见,不代表自己所服务公司的立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

文章

项目