摘要:前言  在 "CSS魔法堂:改变单选框颜色就这么吹毛求疵!" 中我们要模拟原生单选框通过 键获得焦点的效果,这里涉及到一个常常被忽略的属性—— ,由于之前对其印象确实有些模糊,于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的 作用  用于创建可视对象的轮廓(元素的 阅读全文
posted @ 2018-10-09 06:20 ^_^肥仔John 阅读 (417) 评论 (0) 编辑
摘要:前言  是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开 重新开发一个,发现要模拟选中、未选中、不可用等状态很繁琐,而涉及单选框组就更烦人了,其实我们可以通过 、`::before :checked 阅读全文
posted @ 2018-10-04 07:16 ^_^肥仔John 阅读 (617) 评论 (0) 编辑
摘要:前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完 不占用原来的位置,而 保留原来的位置后,面试官就会心一笑呢?其实不止那么简单呢!本文我们将一起深究它俩的恩怨情仇,下次面试时我们可以回答得更出彩! 深入  我们 阅读全文
posted @ 2018-09-30 09:59 ^_^肥仔John 阅读 (732) 评论 (1) 编辑
摘要:前言  继上篇《 "CSS魔法堂:稍稍深入伪类选择器" 》记录完伪类后,我自然而然要向伪元素伸出“魔掌”的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通过伪元素更好地实现更多的可能! 初识伪元素  说起伪元素我第一想到的莫过于 和`::after`这两个了 阅读全文
posted @ 2018-09-18 15:35 ^_^肥仔John 阅读 (659) 评论 (0) 编辑
摘要:前言  过去零零星星地了解和使用 、`::after content`等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理。 伪类  伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果。具体有 、`:visited 阅读全文
posted @ 2018-08-29 09:43 ^_^肥仔John 阅读 (583) 评论 (0) 编辑
摘要:前言  在 "《CSS魔法堂:Transition就这么好玩》" 中我们了解到对于简单的补间动画,我们可以通过 实现。那到底多简单的动画适合用 来实现呢?答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时,我们必须转向CSS Animation了。本文为这段时间学习 阅读全文
posted @ 2018-07-10 16:04 ^_^肥仔John 阅读 (717) 评论 (0) 编辑
摘要:前言  以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结,欢迎各位拍砖。 属性介绍  首先先我们简单粗暴了解 属性 阅读全文
posted @ 2018-06-06 03:53 ^_^肥仔John 阅读 (1259) 评论 (0) 编辑
摘要:前言  Flex是Flexible Box的缩写,就是「弹性布局」。从2012年已经面世,但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀,是要学点新东西刺激一下大脑,打打鸡血。 Flex就这么简单 浏览器兼容性  一说到兼容性就是永远的痛,不过幸运的是只要在IE10加 阅读全文
posted @ 2018-06-04 16:48 ^_^肥仔John 阅读 (833) 评论 (1) 编辑
摘要:前言  在上一篇 "《前端魔法堂——异常不仅仅是try/catch》" 中我们描述出一副异常及如何捕获异常的画像,但仅仅如此而已。试想一下,我们穷尽一切捕获异常实例,然后仅仅为告诉用户,运维和开发人员页面报了一个哪个哪个类型的错误吗?答案是否定的。我们的目的是收集 刚刚足够 的现场证据,好 阅读全文
posted @ 2017-10-25 16:40 ^_^肥仔John 阅读 (798) 评论 (0) 编辑
摘要:前言  本文是学习Thinking in React这一章后的记录,并且用Reagent实现其中的示例。 概要 1. "构造恰当的数据结构" 2. "从静态非交互版本开始" 3. "追加交互代码" 一、构造恰当的数据结构 Since you’re often displaying a JS 阅读全文
posted @ 2017-10-19 15:59 ^_^肥仔John 阅读 (405) 评论 (0) 编辑