• 神奇的选择器 :focus-within

    Posted by : lon.y@qq.com on 2018年8月9日

    CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。 通常而言, #id:after{ ... } #id::after{ ... } 符合标准而言,

    阅读全文...

  • 神奇的选择器 :focus-within

    Posted by : lon.y@qq.com on 2018年8月5日

    CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。 通常而言, #id:after{ ... } #id::after{ ... } 符合标准而言,

    阅读全文...

  • 现代 CSS 进化史

    Posted by : lon.y@qq.com on 2018年2月13日

    CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值,看起来似乎需要做的工作也就这样嘛!然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。 为了解决CSS错综复杂的继承问题,开发者建立了各种不同的最佳实践,问题是哪一个最佳实践是最好的目前尚无定论,而且有些实践相互之间是完全矛盾的。如果你第一次尝试学习CSS,这对于你来

    阅读全文...

  • 欲练JS,必先攻CSS——前端修行之路

    Posted by : lon.y@qq.com on 2018年1月5日

      今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助。 个人的css历史: 说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+float的固定布局,所有元素全部用float,做了学生会网站的全部前端页面,因为有段时间学PS比较多,也是自己做的UI,很丑,老师说第一次做成这样很不错了,那时老师就觉得我有做前端的天赋,我就是从这个时候开始接触前端的。毕业设计自己一个人做了一个全栈的we

    阅读全文...

  • 如何编写通用的 Helper Class

    Posted by : lon.y@qq.com on 2018年1月3日

    Github: https://github.com/nzbin/snack-helper Docs: https://nzbin.github.io/snack-helper 前言 什么是 helper ?任何框架都不是万能的,而业务需求却是多种多样,很多时候我们只需要更改组件的部分属性,而 helper 就是调整细节的工具。我在之前的文章《如何编写轻量级 CSS 框架》中也举过例子,我们完全没必要因为几个属性的不同而重新编写新组件。大部分的 helpe

    阅读全文...

  • 什么是关键 CSS

    Posted by : lon.y@qq.com on 2017年10月6日

    网络速度很慢,但是有一些简单的策略可以使网站变快。其中之一就是将关键的css内联插入到网页的标签, 但是,如果您的网站包含数百页,甚至更糟糕的是包含数百种不同的模板,那么你该怎么做呢? 你不能手动做这件事。 Dean Hume解释了一个简单的方法来完成它。如果您是经验丰富的网页开发人员,您可能会发现这篇文章显而易见,并且不言而喻,但对于您的客户和初级开发人员来说,这是一个很好的选择。— Ed. 提供快速,流畅的网络体验是如今构建网站的重要部分。 大多数情况

    阅读全文...

  • Web真相: CSS不是真正的编程

    Posted by : lon.y@qq.com on 2017年10月6日

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性: 人们对CSS有一些强烈的情愫。 — Dave Rupert (@davatron5000) [September 18, 2017] 来自于:pic.twitter.com/dDspAM8i2F 事实确实如此,CSS不同于传统的编程,且具有缺陷,同任何标准化编程语言相比,使用起来都更为困难。这是由于CSS被设计为一种描绘界面的方式,

    阅读全文...

  • CSS 最核心的几个概念

    Posted by : lon.y@qq.com on 2017年7月15日

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。 元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你

    阅读全文...

  • 不要再在 JavaScript 中写 CSS 了

    Posted by : lon.y@qq.com on 2017年7月4日

    本文作者是 react-css-modules 和 babel-plugin-react-css-modules 的作者。并不是对 CSS in JavaScript: The future of component-based styling,或是使用样式组件的反对,而是一种补充,web 开发者要了解自己的需求,明白自己使用 styled-components 的真正原因。 不要再在 JavaScript 中用 CSS了 9 个谎言 CSS 不应随意放置

    阅读全文...

  • 遇见未知的 CSS

    Posted by : lon.y@qq.com on 2017年7月4日

    摘录自《CSS核心技术详解》 1.1 CSS中你可能会疑问的几个问题 1.1.1 在CSS中为什么要有层叠 在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。 模块化 一个页面中的样式可以拆分成多个样式表,代码如下。 @import url(style/base.css); @import url(style/layer.css); 但这种方式也会随之产生一个问题,即如果对某个

    阅读全文...