FED实验室 - 专注WEB端开发和用户体验

 分类:CSS(3)

CSS2.0+CSS3.0

用 CSS 隐藏页面元素的方式总结

今天看到篇文章"用 CSS 隐藏页面元素的5种方法",现加上自己的一点见解及常见应用归纳如下: 一、Display 将display设置为none,可以实现元素隐藏,并且不会生成盒模型。使用这个属性,被隐藏的元素不会占用任何空间。一旦给元素设置display:none,任何对该元素的交互操作都不会生...

煦涵 2年前 (2016-06-09) 2888℃ 0评论 6 喜欢

Safari :active伪类失效问题

:active伪类,参见CSS2.1 Selector Spec,如果在PC端开发中会经常遇到,当然在某些初级或入门级的面试中也会问到A锚链接元素的几种状态,也许你可能会弄混,:link,:visited,:hover,:active, 常用缩写"LVHA", 或者更好记忆为"LOVE HATE"即...

煦涵 2年前 (2016-02-21) 2233℃ 0评论 5 喜欢

再聊CSS伪元素

之前写过一篇“CSS伪类和伪元素的异同”的文章,里面详细描述了伪类与伪元素的区别以及一些常见应用。由于最近项目开发中,IE8浏览器下遇到一个bug,再聊伪元素。 我们知道随着CSS规范进一步完善,新增的CSS伪元素越来越多,但是在日常开发中,我们常用的及浏览器支持情况比较乐观的当数before和af...

煦涵 2年前 (2015-09-25) 3155℃ 0评论 3 喜欢

聊聊Base64

做为一名FE,你肯定用到过base64,谈到base64,你可能会想到以下几点,base64是什么,浏览器如何解析,现有技术如何把图片转换为base64,base64应用场景有哪些,base64如何解码等等,下面就这些问题一一讲述. base64是什么 Base64是网络上最常见的用于传输8Bit字...

煦涵 2年前 (2015-08-06) 2228℃ 0评论 1 喜欢

placeholder属性多浏览器支持兼容性方案

最近项目开发中遇到不少蛋疼的问题,每一个问题都可单独拿出来探讨,前端领域就是这样,浏览器对标准支持不一,国内IE市场仍有相当的占有率,无端的提高了开发和维护成本。 在本篇文章将来探讨placeholder这个属性,该属性是HTML5提出的一个属性, 占位符的属性值在用户录入数据时用来作为一个简短的提...

煦涵 2年前 (2015-07-19) 7758℃ 1评论 9 喜欢

前端开发中合理选用图片格式

一、GIF,PNG,JPG图片的不同 在前端开发切图中常常会涉及到好多种图片的保存,具体选用何种格式来保存来保存图片,需要根据图片色彩及大小来选择。具体的对比看下面表格: 类型 压缩方式 色彩通道 透明度 是否支持动画 压缩算法 多图层 PNG-8 无损 索引256色 索引全透明 无 ...

煦涵 3年前 (2015-03-29) 5116℃ 1评论 4 喜欢

CSS伪类和伪元素的异同

今天在微博上看到一些人在讨论:before 和::before的区别,有些细节问题自己也有些模糊,工作之余翻了下W3C规范,总结如下: 1. W3C CSS 2.1 Selectors 对伪类和伪元素没有做出区分,都是使用一个冒号,详细请戳这里 比如 伪类:first-child, 伪元素:firs...

煦涵 3年前 (2015-01-20) 3180℃ 2评论 1 喜欢

第一个CSS变量:currentColor

一、基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现。但规范中有个已经存在多年的变量:currentColor。这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它。 引用MDN中的描述: The currentColor keyword represents th...

煦涵 3年前 (2014-12-02) 2880℃ 0评论 3 喜欢

你可能不知道的7个CSS单位

如果你是一名前端开发工程师,一般px和em使用频率比较高。但是今天本文的重点是介绍一些我们使用很少、甚至么有听说的单位。 一、重温em <style type="text/css"> body {font-size: 12px;} div {font-size: 1.5em;}...

煦涵 3年前 (2014-11-13) 4947℃ 3评论 9 喜欢

CSS @supports

在Javascript中,功能检测是一种最佳的检测方式。但是在CSS中对于某些属性支持性检测,确没法做,幸运的是最近Firefox、Chrome、Opera增加了@supports(CSS)和CSS.supports(Javascript)来检测不同浏览器对CSS属性的支持情况。本篇文章将来介绍它们...

煦涵 3年前 (2014-09-07) 2266℃ 1评论 0 喜欢

前端Code规范之CSS

一、基本语法 1.使用2个空格soft tabs 2.为选择器分组时,将单独的选择器单独放在一行。 3.为了代码的易读性,在每个声明块的左花括号前添加一个空格。 4.声明块的右花括号应当单独成行。 5.每条声明语句的冒号后应该插入一个空格。 6.为了获得更准确的错误报告,每条声明都应该独占一行。 7...

煦涵 4年前 (2014-04-21) 1835℃ 3 喜欢

兼容的File上传域

由于各浏览器的<input type="file">兼容性差异很大,在涉及多语言的项目中,浏览二字无法翻译,虽然有可能随着系统语言环境的不同而不同,但是论证一番还是觉得不靠谱,于是写个兼容的东东,方便使用,效果图及代码如下: <!doctype html> <htm...

煦涵 4年前 (2014-04-14) 2121℃ 0评论 0 喜欢