逢10月小长假,几天不敲键盘,浑身难受。也是有时间分享一下自己遇到的css问题。先说一下什么css hack

简单介绍一下css hack:

定义:

  一般都是利用各浏览器的支持CSS的能力和BUG来进行的,可以分为能力选择和怪癖选择(BUG)。

  能力通常是指浏览器对CSS特性的支持程度,而怪癖是指浏览器特有的一些BUG。

  总结:这里定义的很清晰哦:第一浏览器的对  css  支持程度 不一样,第二,不同的浏览器携带自身特有的属性

提醒:

  尽量找到通用方法而减少对CSS Hack的使用,大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题

  总结:这里指出,不是hack 写的越多越好,考虑到 每种浏览器各个版本之间还存在差异,时间花费,也不一定就有好的成效。

书写方法:

  CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。稍后回有例子。

本次主要说明   浏览器的对  css  支持程度

三种书写方法:

  一:条件Hack    ( IE )

  <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]-->

  if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本

是否:
指定是否IE或IE某个版本。关键字:空
大于:
选择大于指定版本的IE版本。关键字:gt(greater than)
大于或等于:
选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)
小于:
选择小于指定版本的IE版本。关键字:lt(less than)
小于或等于:
选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)
非指定版本:
选择除指定版本外的所有IE版本。关键字:!

特别强调 IE10以后没有条件hack了。

举例子:

  <!--[if IE 8]>   //这是格式

    //这里是code区域,不仅可以是css  也可以使html标签    (HTML代码块 )

    <style>
      div{position:relative;}     
    </style>

  <![endif]-->

  二:属性Hack    ( 了解,官方说明:需谨慎使用 )

    selector{<hack>?property:value<hack>?;}

    就简单举个例子,就不做详细的说明了

     

   如想同一段文字在IE6,7,8显示为不同颜色,可这样写:

  .test {
   color: #090\9; /* For IE8+ */
*color: #f00; /* For IE7 and earlier */
_color: #ff0; /* For IE6 and earlier */
  }

   三:选择符级Hack    ( 了解,官方说明:需谨慎使用 )

    这个就是我们常用的css选择器。只要多注意一些css语法的兼容性,一般不建议使用hack。

    * html .test { color: #090; }       /* For IE6 and earlier */
    * + html .test { color: #ff0; } /* For IE7 */
    .test:lang(zh-cmn-Hans) { color: #f00; } /* For IE8+ and not IE */
    .test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */ 总结一下:
    这里简单介绍一下css hack的说明。关于兼容浏览器的hack,尽量少使用。
  原因:
    1 开发项目 不仅考虑 浏览器之前的版本,更要注意 浏览器的后续发展,不能已解决现在的问题,就是完全解决问题。         一方面:这样敲代码,用一位前辈的话来说: Inhumanity,不人道的,后面接手的兄弟(或者妹子)完全抓狂         另外一点:多考虑,有利于今后解决问题的多思路,对于今后的代码容错有非常大的帮助。     2 浏览器的兼容,需要说明兼容的版本,以及理由,这也是我们程序员的应该要考虑的。
      
        作为一个面向大学生消费群体的应用,去兼容IE67 这样的需求,完全可以拍回去。

web端 css hack(一)的更多相关文章

  1. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  2. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

  3. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  4. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  5. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  6. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  7. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

  8. 基于SignalR的web端即时通讯 - ChatJS

    先看下效果. ChatJS 是基于SignalR实现的Web端IM,界面风格模仿的是“脸书”,可以很方便的集成到已有的产品中. 项目官网:http://chatjs.net/ github地址:htt ...

  9. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

随机推荐

  1. rlwrap:让控制台程序使用input.rc里的设置

    习惯了vi模式,在bash里配置input.rc可以使平时命令行操作都使用vi习惯,翻页和跳动光标都很方便 但是当运行一些交互式程序时,比如redis-cli,lua等,它们却不按input.rc的配 ...

  2. 5.6 安装slack,Skype,google

    1.将安装包放到自己的目录下: 2.打开终端,进入安装包所在的目录(cd /文件名) 3.输入命令:sudo apt-get install 安装包名 4.等待安装结束 5. 在搜索框中输入关键字sl ...

  3. Session和cookie有什么区别?

    cookie是保存在客户端的信息,它只能保存String类型的,没有session安全,如果客户端禁用了cookie就不能够使用了 Cookie是客户端技术,程序把每个用户的数据以cookie的形式写 ...

  4. C++ STL 的各结构实现

    C++ STL 的实现: 1.vector  底层数据结构为数组 ,支持快速随机访问 2.list    底层数据结构为双向链表,支持快速增删 3.deque   底层数据结构为一个中央控制器和多个缓 ...

  5. Lxc的cgroup技术

    你将学到什么 什么是cgroup 如何使用cgroup Cgroup简介 CGroup是Control Groups的缩写,是Linux内核提供的一种可以限制.记录.隔离进程组所使用的硬件资源的机制. ...

  6. Go:定时执行任务time.sleep和time.tick的优劣

    golang 写循环执行的定时任务,常见的有以下三种实现方式:1.time.Sleep方法: for { time.Sleep(time.Second) fmt.Println("我在定时执 ...

  7. Isolation Forest算法实现详解

    本文介绍的 Isolation Forest 算法原理请参看我的博客:Isolation Forest异常检测算法原理详解,本文中我们只介绍详细的代码实现过程. 1.ITree的设计与实现 首先,我们 ...

  8. sys_guid()

    create extension "uuid-ossp"; create or replace function sys_guid() returns uuid as $$sele ...

  9. oracle odbc连接sqlserver 无法查询字段

    最近因项目需要,需要在oracle数据库里面通过DBLINK方式链接SQLserver数据库(oracle 11G,Sqlserver2016,具体实现参考链接 http://blog.sina.co ...

  10. 移动端APP第一次登录和自动登录流程

    App登陆保存数据流程App因为要实现自动登陆功能,所以必然要保存一些凭据,所以比较复杂. App登陆要实现的功能: 密码不会明文存储,并且不能反编绎解密: 在服务器端可以控制App端的登陆有效性,防 ...