HTML5|CSS3

基础知识HTML5、CSS3以及在PC和H5页面的适配和兼容

如何高效响应用户触摸动作

7

前端学堂 发布于 2019-07-27

响应元素状态 您是否有过这样的经历:触摸或点按网页上的某个元素时怀疑网站是否真的检测到了您的触摸动作? 只需在用户触摸 UI 元素或与其进行交互时改变元素的颜色,用户就能基本确认网站处于工作状态。 这样做不仅能减轻用户的失望感,还能让其觉得网站敏捷并且响应迅速。 DOM 元素可继...

阅读(216)赞 (2)

media type 与media query

前端学堂 发布于 2019-07-08

CSS link、@import共同点:都是为了加载CSS文件。 CSS link、@import不同点: Link属于XHTML标签,而@import完全是CSS提供的一种方式。link除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@imp...

阅读(124)赞 (3)

构建DOM和CSSOM

4

前端学堂 发布于 2019-06-27

什么是DOM Document Object Model 文档对象模型 什么是DOM?可能很多人第一反应就是div、p、span等html标签(至少我是),但要知道,DOM是Model,是Object Model,对象模型,是为HTML(and XML)提供的API。HTML(H...

阅读(225)赞 (3)

什么是containing block?

3

前端学堂 发布于 2019-06-07

什么是containing block? 如果干巴巴的问一个前端什么是containing block。大部分都不知所云。官方示意如下: The size and position of an element are often impacted by its containin...

阅读(197)赞 (3)

说说http状态码和妙用

1

前端学堂 发布于 2019-06-07

  一些常见的状态码 1开头 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码 说明 100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。 101 (切换协议) 请求者已要求服务器切换协议,服务器...

阅读(153)赞 (3)

noopener和noreferrer

前端学堂 发布于 2019-03-25

ESLint的确是个好东西,在使用airbnb的JavaScript语法校验工具时,如下的<a>链接标签报出了安全错误: <a className="link" href="http://www.honeywell.com/terms-conditions" t...

阅读(412)赞 (2)

理解CSS animations 和 transitions的性能问题与动画调试

8

前端学堂 发布于 2019-03-12

你可能已经在一些项目中使用过CSS Animations 或者CSS Transitions(如果没有,可以到CSS-Trick上查阅相关的资料:animations&transitions)你所做的一些动画可能是平滑的,但其中有一部分可能会很不连贯。你想知道为什么吗? ...

阅读(284)赞 (5)

Shadow DOM简单了解

11

前端学堂 发布于 2019-03-09

你有好奇过这个问题吗,为什么只用video标签包裹着source标签,就可以完成一系列视频功能:播放/暂停按钮、进度条、视频时间显示、音量控制等等?既然 DOM 源码这么干净,你有想过实现这些组件的代码是从哪儿来的吗? 1. 简介 Shadow DOM它允许在文档(documen...

阅读(233)赞 (4)

前端入门学习案例1 – 致敬卓别林

1

前端学堂 发布于 2018-12-04

实现效果:   要求: 1. 用html+css实现整体效果(致敬卓别林) 2. Hover到Laughter上是,展示其他文案 3. 点击中间的小胡子,帽子会有个掀开的动效 在线练习工具: https://www.fed123.com/code?code=fed-hw...

阅读(350)赞 (0)

实现路径动画SMIL或offset-path和canvas

2

前端学堂 发布于 2018-11-27

路径动画在增强用户体验过方面还是挺有用的。当然你也可以用个gif图来实现,gif是万能的,但是前提是一定要满足业务对页面性能的要求。我们这里主要介绍的是现有的技术方案。 SVG SMIL animation SMIL(Synchronized Multimedia Integra...

阅读(651)赞 (1)

高性能CSS动画

8

前端学堂 发布于 2018-11-27

CSS Animation是实现Web Animation方法之一,其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,咱们来聊聊CSS Animation性能相关的话题。 浏览器渲染机制 关...

阅读(360)赞 (1)

图片铺满展示不变形object-position/object-fit

前端学堂 发布于 2018-10-29

如何让不同尺寸的图片内容铺满一个框框展示而且不变形呢? 方法1:背景图 是的,用背景图,只需要 bcakground-size: contain; 即可搞定。用起来很方便,除了不太符合语义化。   方法2:object-fit 类似于 这个是css3新增在img上的属性...

阅读(268)赞 (0)