CSS


  • 之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS 的一些黑魔法小技巧,无奈我 CSS 一直很渣,没什么干货,最近写了一个 Chrome 插件 GayHub,算是把 GitHub 的样式审查了个变,在写的过程中,也收获了很多关于 CSS 的小技巧,尤其是开始的第一个技巧,学习到了很多,于是再加上一波搜集,就诞生这篇博文,欢迎补充~~~😂

    1、利用 CSScontent 属性 attr 抓取资料

    需求

    鼠标悬浮实现一个提示的文字,类似github的这种,

  • 最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方式完成评分和展示分数的功能,没有js,也就意味着没判断逻辑,代码出错的几率更少,也更便于维护,在此,把这个功能的实现的过程记录和分享一下,一起学习交流。

    原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步。

    五角星的实现

    1.图片或者字体图标

    不极致追求性能的话,直接利用设计师给的png或者jpg

  • 最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因。

    1、PX(CSS pixels)

    1.1 定义

    虚拟像素,可以理解为“直觉”像素,CSSJS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px

    1.2 注意

    CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,相对的是设备像素(device pixel)。

    在同样一个设备上,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素

  • CSS 类名的单词连字符:下划线还是横杠?

    本文的部分内容整理自我对此问题的解答: 命名 CSS 的类或 ID 时单词间如何连接? - 知乎

    问题

    CSS 类或 ID 命名时单词间连接通常有这几种写法:

    • 驼峰式: solutionTitlesolutionDetail
    • 用横杠连接: solution-titlesolution-detail
    • 下划线连接: solution_titlesolution_detail

    应该采用哪种写法呢?选择的时候是出于个人习惯还是有别的考虑?

    看了下豆瓣,美团,淘宝的源码,都是采用 solution_title 的写法。

    我的回答

    首先定个性,

  • 浅谈 CSS 预处理器(一):为什么要使用预处理器?

    前言

    你好,我是魔法哥。我是一名传统的前端开发者,我的很大一部分工作就是为各种类型的网页写 CSS,写了很多年。

    我从三年前开始接触并使用 CSS 预处理,如鱼得水,相见恨晚。因此,我感觉有必要写些文章来总结一下这方面的心得。如果你是一位还没有接触预处理器的 CSS 开发者,希望我的文章能够帮助你轻松开始!

    (注:本文的示例代码均采用 Stylus 作为 CSS 预处理语言。)

    背景

    CSS 自诞生以来,基本语法和核心机制一直没有本质上的变化,它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰,轻便易学是