• CSS3 transform的一些细节

    之前虽然用CSS3 transform做过动画相关项目,目的就是让元素动起来,看着比较酷炫,仅此而已。但是最近想用transform实现小于12px文字的时候却发现transform并未将由于文字过长而换行的文字改为单行,那正好趁着这个机会小小的研究一把。

    用transform实现小于12px大小时的一些细节

    众所周知Chrome里面(据说只有中文版,未测试)文字最小为12px,那么要实现10px的文字大小,就会用到transform

    transform:scale(.5)

    这对于正常的应用来说是没问题的,比如下面的例子

    See the Pen font-size smaller than 12px demo1 by Bane Lee (@zenoven) on CodePen.

    例1

    .a是正常的20px大小,.b用font-size设置为10px但是chrome下无效,.c用transform实现10px大小。 但是当遇到空间小而数据多并且要求不换行的时候,用scale来缩小文字就会有一定的问题,如下例无论缩放多小,文字始终还是两行。

    See the Pen transform has no effect by Bane Lee (@zenoven) on CodePen.

    例2

    那怎么解决呢?目前想到的一种方案是将元素包起来,宽度增加到足够容纳元素,然后整体scale,效果如下

    See the Pen transform works by Bane Lee (@zenoven) on CodePen.

    例3

    问题是解决了,但是这是为什么呢?同样是用transform来scale,一个作用在父元素,一个作用在子元素,差别怎么就这么大呢?

    transform不改变元素实际宽高及定位

    直接上例子也许看的更清楚~

    See the Pen CSS3 transform position and dimension test by Bane Lee (@zenoven) on CodePen.

    例4

    上例中.target被.wrapper包裹并左浮动、设置scale及translate后.target变化了,如果transform改变了元素的实际宽高就必然会导致.wrapper变化,但是实际的效果显示.wrapper没有任何改变,证明transform不会改变元素实际宽高及定位,也就是说transform并不会对相邻元素造成影响。

    如何获取transform之后的视觉宽高及定位

    其实例4中已经提供了一种方法,就是用getBoundingClientRect()这个方法,可以获取到transform后的尺寸及定位,具体可点此查阅MDN

  • 2015年初北京三日行

    IMG_20150109_104720

    北京作为传说中的帝都,作为土鳖的我还一直未去过甚是遗憾,碰巧的是去年在微博上看到裕波说要办个中国首届CSS开发者大会,我也非常想去这个大会,那就借这个机会顺便领略下北京的风光吧(你就是想去玩呗 XD)~~

    在北京总共呆了3天,大致日程如下

    • 1月09日:上午10点到北京,然后去天安门、故宫
    • 1月10日:参加CSS开发者大会
    • 1月11日:上午颐和园,中午买全聚德烤鸭,下午3点开 坐高铁回上海,晚上8点到虹桥

    当然,中间的事比上面的列表多多了,还是说说我的一些感受,或者一些值得说的事情吧~~

    对北京的一些感受

    好冷,好干

    看看,这河里都结冰了,颐和园里冰上单车好多人在玩~

    IMG_20150111_102846

    在北京住了两个晚上,晚上洗澡后第二天风一吹,腿上都是细小的裂口,那个疼哎~~  (所以要记住保养咯 – -!)

    工资高,消费也高

    10号晚上约两个大学同学出来吃饭,我们都是搞计算机的,听完他们的工资,我只剩惊讶的份儿了,简直泪奔啊~ 干了这么久还不如人家刚毕业的拿得多,所以那感受你懂得~~ 当然,这里面跟你的能力,公司,职位,经验等等都有关系,可是抛开这些,北京工资还是高!就是这么拽!

    羡慕无用,还是从提升自己的能力抓起是硬道理,别的就是换工作,甚至是去北京工作了,不过这又是另外一回事了~

    在北京听同学说一天吃饭要50块钱,刚开始有点惊讶,后来一算,还真得花这么多,普普通通的一顿午餐或者晚餐,二十几块钱,甚至三十几块钱,那都是再正常不过了~~ 比起上海,还是稍微贵了一点点。

    不过有一点很让我吃惊,学驾照的费用两个同学竟然都说是在5000左右,这比起上海的1W,那可真是巨便宜了~~

    北京方言很好玩

    以前虽然听过一个同事讲过很有北京味儿的话,但是还没真正听过,那来北京之后的感觉就不一样了,胡同里的大妈,学校学生,商场服务员,到处都是儿化音超重的地道的北京话,甚至连我都不自觉的说上了,XDDDD

    中国首届CSS开发者大会

    作为一个前端开发者,关注下行业的发展还是很有必要的。这个大会为期一天,不少前端界的领军人物都带来了精彩的分享,收益颇多。完整的资料我也正在收集中,可以在这里查看,下面列出一些自己觉得比较有分量的分享吧。

    灭灭:《Web Fonts@豆瓣阅读》

    灭灭讲了不少文字方面的东西,有好多我都不了解甚至都没听过,比如kerning,hints,FOUT,下面是他的演讲内容幻灯片,还有PDF版的,可以从这里下载

    勾三股四:《Web Components 中的CSS》

    我感觉这哥们超级牛逼,思路清晰,在时间非常紧迫的情况下还是讲的很到位,只可惜时间不多很多内容没法展开讲,下面是他的视频,另外我也找到了他的演讲PPT,点击这里查看 (上下箭头切换)

    另附一篇勾三股四讲的CSS3 Scoping的详细介绍

    johnhax(贺师俊):《CSS框架的迷思》

    这个大牛站的更高,讲了些CSS框架的弊端,以及BEM、OOCSS等规范的对比,演讲PPT请看这里

     

  • 绝对定位元素宽高分析

    update[2015-02-02]: 在理解了containing block这个概念之后,发现这篇文章好水,但是人都是慢慢进步的嘛,所以还是留着好了~


    一直以来对绝对定位元素没有太多了解,上周五下午测试的时候发现绝对定位元素在使用100%宽高的时候占据的不仅仅是父元素的宽高,还包括父元素的padding,这么说比较抽象,咱直接上demo吧。

    See the Pen dimension of absolute positioned element by Bane Lee (@zenoven) on CodePen.

    说明:

    1. .sub为绝对定位,多数.wrap为相对定位;
    2. .sub2有边框,.sub3有padding,.sub4有边框也有padding;
    3. .block1 中的.sub没有设置宽高;
    4. .block2/3中的.sub用百分比设置宽高;
    5. .block4/5中的.sub用left/right/top/bottom来设置宽高;
    6. .block6/7中的.sub用固定px值设置宽高;
    7. .block2和.block3对比,区别在于.block3的定位及.block3 .wrap的定位;
    8. .block4和.block5对比,区别在于.block5的定位及.block5 .wrap的定位;
    9. .block6和.block7对比,区别在于.block7中.sub设置overflow visible;
    10. 测试环境为Mac OS X 10.9.5,Chrome 38.0.2125.101 / Firefox 32.0.3,WIN8虚拟机下测试了IE8-11。

    通过对比以上的输出,对绝对定位元素可以得出如下结论:

    1. 宽高计算参考对象是其最近的设置为relative的父元素为参考对象,如.block2和.block3的对比;
    2. 在没有设置宽高时根据其内容自适应,如.block1;
    3. 在用百分比计算宽高时,要加上参考对象的padding,.sub 宽/高 = (参考对象宽/高 + padding-left + padding-right) * 百分比,如.block2;
    4. 在用left/right/top/bottom设置宽高时,.sub 宽/高 需要减去.sub的border和padding,如.block4;
    5. 在用固定的px值设置宽高后,border、padding无影响,即.sub宽/高 = 设置的宽/高,如.block6;
    6. 在用固定的px值设置宽高后,即使设置overflow: visible 也无效,如.block6和.block7对比。

    啰嗦的挺多,其实也蛮简单的就1和3这两条,以closest relative的对象作参考,百分比算宽高时参考对象的padding要计算在内,其他的几条都是细节性的东西仔细想下就明白了。

    如有纰漏,欢迎指正~

  • IE6 !important bug刨根问底

    以前总听人说IE6不支持 !important,但是真的是这样么?最好的办法那就是亲身实践,Go!

    测试1:

    #a {
        color: red !important;
        color: blue;
    }
    
  • IE8 form嵌套导致DIV重复显示

    今天在做页面的时候发现了个奇怪的现象,一段代码在IE8下DIV好像重复显示了。(下面两段是经过,可以无视直接跳到具体现象那一部分)

    在.NET群里面问了半天无果,雷锋QQ群众多朋友帮助下也没有找到原因,朋友们说也都是在IE8下有问题。检查这段代码的HTNL、CSS好多次,无果。无奈,一个个删这段代码之前、之后的代码,差不多删完了也同样没有找到。这段代码没问题啊。。。突然想到了这里面的form标签,对了,母版页也有个form!删了这段代码的form,OK!

    晕。。。真没想到竟然是这个原因!现在想来,我这么久才找到bug所在,一方面是因为这段代码之前在纯HTML页面的时候是没有问题的,而粘贴到VS2005后,VS2005必须有一个默认的form ,另一方面我用了母版页,我一直以为是母版页有bug(因为前两天我用母版页的时候出过问题)

    *********************************************

    具体现象

    如果代码的结构如下面所示

    <form id="form1">
        <div>
            <form id="form2">
            </form>
        </div>
    </form>
    

    那么这段div就会在下面重复显示一次(IE8下,只是重复显示一个空的div)

    而且如果这个div没有设置高度而设置了border,那么下面重复的效果就是条线,如果设置了高度,那么下面就是一个同样的div效果。

    下图显示的是div设置了高度,下面会重复显示一个同样的div

    总结

    粘贴代码的时候一定要注意环境,就像我之前虽然已经检测过代码无误,但是环境改变了,form嵌套问题就出在这里。另外问题出现的时候如果实在找不到原因,排除法很好。

  • CSS中的块级元素与内联元素

    块元素(block element)

    块级元素,形象点说就是一个四方块,可以放在页面上任何地方,一般都会另起一行显示。

    有以下元素。

    * address – 地址
    * blockquote – 块引用
    * center – 举中对齐块
    * dir – 目录列表
    * div – 常用块级容易,也是css layout的主要标签
    * dl – 定义列表
    * fieldset – form控制组
    * form – 交互表单
    * h1 – 大标题
    * h2 – 副标题
    * h3 – 3级标题
    * h4 – 4级标题
    * h5 – 5级标题
    * h6 – 6级标题
    * hr – 水平分隔线
    * isindex – input prompt
    * menu – 菜单列表
    * noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
    * noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
    * ol – 排序表单
    * p – 段落
    * pre – 格式化文本
    * table – 表格
    * ul – 非排序列表

    内联元素(inline element)

    内联元素,所有不是块级元素的都是内联元素。

    * a – 锚点
    * abbr – 缩写
    * acronym – 首字
    * b – 粗体(不推荐)
    * bdo – bidi override
    * big – 大字体
    * br – 换行
    * cite – 引用
    * code – 计算机代码(在引用源码的时候需要)
    * dfn – 定义字段
    * em – 强调
    * font – 字体设定(不推荐)
    * i – 斜体
    * img – 图片
    * input – 输入框
    * kbd – 定义键盘文本
    * label – 表格标签
    * q – 短引用
    * s – 中划线(不推荐)
    * samp – 定义范例计算机代码
    * select – 项目选择
    * small – 小字体文本
    * span – 常用内联容器,定义文本内区块
    * strike – 中划线
    * strong – 粗体强调
    * sub – 下标
    * sup – 上标
    * textarea – 多行文本输入框
    * tt – 电传文本
    * u – 下划线
    * var – 定义变量

    可变元素

    可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    * applet – java applet
    * button – 按钮
    * del – 删除文本
    * iframe – inline frame
    * ins – 插入的文本
    * map – 图片区块(map)
    * object – object对象
    * script – 客户端脚本

    写CSS的时候这个还是挺需要的,因为我之前对这个不是很了解,有的本来就是块级元素的还让我给加了个display:block,真是多此一举,呵呵,知道了这个以后就不会犯同样错误了。

    PS:文章整理于网络,原作者不详,如作者看到请联系我。

  • 用CSS Sprites合并WordPress表情图片教程

    用CSS Sprites将WordPress表情图片合并为一个文件这个想法其实我很早就有了,我已经在别的网站上见到这样的应用了(比如人间网就用了这个技术)。

    那么这个方法有什么好处呢?

    我想这个方法最大的好处就是大大减少了HTTP Request数量(要知道一般博客上面如果有表情的话,那么表情图片的数量少则有7、8个,多则可达20+,像我之前就用了24个)以及图片的大小(以前我24个GIF图是36K+,现在则只有一个大小为4.74KB的xiaonei.png),这对于大流量的网站的好处是显而易见的。

    当然缺点呢也很明显,图片成静态的了(其实也可以做成动态的,但是比较麻烦,而且文件也会比较大),朋友们会觉得比较死板,没有以前那么生动了。我个人感觉其实还可以,要知道很多网站是没有表情的,呵呵。

    好了,下面Zenoven先说说WordPress实现表情符号到图片的原理。

    1、WordPress后台首先要启用表情转换(在WP后台>设置>撰写选项>格式化 将 “转换如 :-):-P 的文字表情符号为图像”选中)

    2、当用户发布评论后,WP根据   网站根目录/wp-includes/functions.php中smilies_init() 的定义,将表情符号转换为对应的文件名。

    3、接着在评论显示的时候,WP根据    网站根目录/wp-includes/formatting.php 中translate_smiley($smiley) 的定义,输出一个 img标签,显示对应的表情。

    也就是说从你输入表情对应的符号(或是点击表情)到显示图片经历了这么一个过程

    表情符号>>表情文件名>>IMG标签

    原理知道了,那么实现我想要的功能就很简单了。思路如下。

    首先转换表情符号为文件名这一块,我让他转换成表情的ID,然后生成img标签呢,我又修改为生成一个a标签,然后利用表情的ID,给每一个生成的a标签设置CSS样式(最主要的就是background-position的应用了)

    下面是我实现的具体步骤。

    1、修改    网站根目录/wp-includes/functions.php中smilies_init() 的定义。下面是我修改后的smilies_init()中if ( !isset( $wpsmiliestrans ) )部分。

    	if ( !isset( $wpsmiliestrans ) ) {
    		$wpsmiliestrans = array(
    		':(1):' => 'xiaone_1',
    		':(2):' => 'xiaonei_2',
    		':(3):' => 'xiaonei_3',
    		':(4):' => 'xiaonei_4',
    		':(5):' => 'xiaonei_5',
    		':(6):' => 'xiaonei_6',
    		':(7):' => 'xiaonei_7',
    		':(8):' => 'xiaonei_8',
    		':(9):' => 'xiaonei_9',
    		':(10):' => 'xiaonei_10',
    		':(11):' => 'xiaonei_11',
    		':(12):' => 'xiaonei_12',
    		':(13):' => 'xiaonei_13',
    		':(14):' => 'xiaonei_14',
    		':(15):' => 'xiaonei_15',
    		':(16):' => 'xiaonei_16',
    		':(17):' => 'xiaonei_17',
    		':(18):' => 'xiaonei_18',
    		':(19):' => 'xiaonei_19',
    		':(20):' => 'xiaonei_20',
    		':(21):' => 'xiaonei_21',
    		':(22):' => 'xiaonei_22',
    		':(23):' => 'xiaonei_23',
    		':(24):' => 'xiaonei_24',
    		);
    	}
    

    2、修改      网站根目录/wp-includes/formatting.php 中  function translate_smiley($smiley) 的定义。下面是我修改后的function translate_smiley($smiley) 的代码段。

    function translate_smiley($smiley) {
    	global $wpsmiliestrans;
    
    	if (count($smiley) == 0) {
    		return '';
    	}
    
    	$siteurl = get_option( 'siteurl' );
    
    	$smiley = trim(reset($smiley));
    	$img = $wpsmiliestrans[$smiley];
    	$smiley_masked = esc_attr($smiley);
    
    	return " <a class='wp-smiley $img' ></a> ";
    }
    

    3、在评论文本框附近的表情显示(就是你能看到的点击一个表情就会在文本框输入对应的符号),由于我没有用WP表情插件,用的是老万他们用的smiley.php这个文件,所以接下来做的就是修改smiley.php了(由于这里贴代码没有太大意义,所以在文章最后所有修改后的文件一并给出)

    4、设计CSS样式。(代码略)

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    修改后的各个文件及详细使用说明 下载1(115网盘) 下载2(xun6)

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

  • WordPress表情不会动了?怎么回事?

    首先请刷新下~~

    如果还是不会动。。。那么就证明我成功了!哈哈,是不是有点莫名奇妙?

    因为你现在看到的所有表情其实都在一个图片文件里,是个静态的GIF,大小5.32KB,这个就是昨天晚上忙乎了几个小时的效果。

    所有表情看起来像是图片,即img标签,其实是a标签,这是用CSS sprites做的效果。从认识这个CSS Sprites开始我就异常喜爱,因为他可以很轻松的减小图片的数量和大小。

    目前在IE6下面还没有测试,别的浏览器好像显示都正常了。如果有错位或其他bug请提出,方法今天整理好就放出,敬请期待!

第1页,共3页123