Loading

CSS 技巧与浏览器兼容

方方

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

CSS 学习方法

protocol 协议、礼节

hack

程序员专用:用奇技淫巧达到目的

比如:利用一个 bug 来修复另一个 bug

目录

  1. CSS 的学习方法
    1. 开发者工具的使用
    2. 在线预览工具的使用
  2. CSS 中的路径
  3. HTTP 简介(很简)
  4. 浏览器兼容方法
  5. 问答

CSS 的学习方法

CSS 比 JS 难学,只是语法简单点

  1. 你需要记住每个单一的选择器、属性的用法
  2. 然而这些东西并没有什么用
  3. 只有组合某些用法,你才能满足需求
  4. 需求一变,你就得重新组合
  5. 组合考验的是你的应变能力

但是万变不离其宗

  1. 你需要讲单一的选择器、属性理解透彻
  2. 你的大脑是一个 CSS 解析器
  3. 或者你拥有一个类似 jsbin / runjs 的在线预览工具

CSS 的学习方法

border 三角形为例

  1. 使用开发者工具看别人是怎么做的
  2. 使用在线预览工具自己实现

CSS 中的路径

与命令行中的路径类似

  1. 相对路径
  2. 绝对路径
  3. 带协议的绝对路径
  4. 无协议的绝对路径

相关知识

如何在本地启动一个服务端(server)?

1. NodeJS 的 http-server 包

2. WebStorm

3. Apache 什么的……

路径写错了怎么排查

HTTP 简介

只介绍很简单的几个知识点

  1. 返回码
    1. 200
    2. 404
  2. 状态
    1. pending
  3. CDN
    1. Google CDN 插件

浏览器兼容方法

首先要决定是否兼容

  1. 你是否要兼容 IE ?
  2. 兼容到什么程度?

如何兼容?(以 inline-block 和 hover 为例)

  1. cc (ie conditional comments)
  2. property hacks
  1. IE 的 “bug 无穷无尽,因为渲染标准不同
  2. 遇到一个解决一个,只要你会调试

IE 一般调试方法(CSS)

  1. 使用高版本IE的控制台
  2. border: 1px solid red;
  3. outline: 1px solid red;
  4. javascript:alert(document.get...)

问答

作业:

  • 使用 CSS 制作一个三角形
  • 使用 CSS 制作一个剪头形状

 

完。

Made with Slides.com