之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS
的一些黑魔法小技巧,无奈我 CSS
一直很渣,没什么干货,最近写了一个 Chrome
插件 GayHub,算是把 GitHub
的样式审查了个变,在写的过程中,也收获了很多关于 CSS
的小技巧,尤其是开始的第一个技巧,学习到了很多,于是再加上一波搜集,就诞生这篇博文,欢迎补充~~~
CSS
的 content
属性 attr
抓取资料鼠标悬浮实现一个提示的文字,类似github的这种,
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方式完成评分和展示分数的功能,没有js,也就意味着没判断逻辑,代码出错的几率更少,也更便于维护,在此,把这个功能的实现的过程记录和分享一下,一起学习交流。
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步。
不极致追求性能的话,直接利用设计师给的png或者jpg
最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因。
虚拟像素,可以理解为“直觉”像素,
CSS
和JS
使用的抽象单位,浏览器内的一切长度都是以CSS
像素为单位的,CSS
像素的单位是px。
在CSS
规范中,长度单位可以分为两类,绝对(absolute
)单位以及相对(relative
)单位。px
是一个相对单位,相对的是设备像素(device pixel
)。
在同样一个设备上,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素
本文的部分内容整理自我对此问题的解答: 命名 CSS 的类或 ID 时单词间如何连接? - 知乎
CSS 类或 ID 命名时单词间连接通常有这几种写法:
- 驼峰式:
solutionTitle
、solutionDetail
- 用横杠连接:
solution-title
、solution-detail
- 下划线连接:
solution_title
、solution_detail
应该采用哪种写法呢?选择的时候是出于个人习惯还是有别的考虑?
看了下豆瓣,美团,淘宝的源码,都是采用
solution_title
的写法。
首先定个性,
前言
你好,我是魔法哥。我是一名传统的前端开发者,我的很大一部分工作就是为各种类型的网页写 CSS,写了很多年。
我从三年前开始接触并使用 CSS 预处理,如鱼得水,相见恨晚。因此,我感觉有必要写些文章来总结一下这方面的心得。如果你是一位还没有接触预处理器的 CSS 开发者,希望我的文章能够帮助你轻松开始!
(注:本文的示例代码均采用 Stylus 作为 CSS 预处理语言。)
CSS 自诞生以来,基本语法和核心机制一直没有本质上的变化,它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰,轻便易学是