腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

偏前端工程师的驿站

专栏作者

274

文章

344198

阅读量

58

订阅数

CSS魔法堂：那个被我们忽略的outline

在CSS魔法堂：改变单选框颜色就这么吹毛求疵！中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^

2018-10-11

7190

CSS魔法堂：改变单选框颜色就这么吹毛求疵！

是否曾经被业务提出"能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！"，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开input[type=radio]重新开发一个，发现要模拟选中、未选中、不可用等状态很繁琐，而涉及单选框组就更烦人了，其实我们可以通过label、::before、:checked和tabindex，然后外加少量JavaScript脚本就能很好地模拟出一个样式更丰富的“原生”单选框。下面我们一起来尝试吧！

2018-10-08

2.7K0

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将一起深究它俩的恩怨情仇，下次面试时我们可以回答得更出彩！

2018-10-08

1.4K0

CSS魔法堂：一起玩透伪元素和Content属性

继上篇《CSS魔法堂：稍稍深入伪类选择器》记录完伪类后，我自然而然要向伪元素伸出“魔掌”的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！

2018-10-08

6600

CSS魔法堂：稍稍深入伪类选择器

过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。

2018-10-08

1K0

CSS魔法堂：更丰富的前端动效by CSS Animation

前言在《CSS魔法堂：Transition就这么好玩》中我们了解到对于简单的补间动画，我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢？答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时，我们必须转向CSS Animation了。本文为这段时间学习的记录，欢迎拍砖。简单粗暴介绍CSS Animation 规则和属性定义关键帧动画语法： @keyframes <Animation Name> { [<Animation Time O

2018-07-11

1.2K0

CSS魔法堂：Transition就这么好玩

前言以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。属性介绍首先先我们简单粗暴了解transition属性吧！ transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;

2018-07-11

8140

编译期类型检查 in ClojureScript

前言话说"动态类型一时爽，代码重构火葬场"，虽然有很多不同的意见(请参考)，但我们看到势头强劲的TypeScript和Flow.js，也能感知到静态类型在某程度上能帮助我们写出更健壮的代码（当然要基于充分的单元测试上啦）。 ClojureScript与JavaScript一样采取动态类型，但由于需要通过Google Closure Compiler编译后才能运行，因此我们可以如同JS那样借助GCC的注解来引入编译时类型检查，达到同样静态类型的效果。配置项目设置 GCC的编译时类型检查仅当optim

2018-07-11

6950

Chrome Extension in CLJS —— 搭建开发环境

前言磨刀不误砍柴工，本篇将介绍如何搭建Chrome插件的ClojureScript开发环境。具体工具栈：vim(paredit,tslime,vim-clojure-static,vim-fireplace) + leiningen(lein-cljsbuild,lein-doo,lein-ancient) + com.cemerick/piggieback 写得要爽首先抛开将cljs编译为js、调试、测试和发布等问题，首先第一要务是写得爽～ cljs中最让人心烦的就是括号()，过去我想能否

2018-07-11

1.7K0

(cljs/run-at (JSVM. :all) "Metadata就这样哦")

前言动态类型语言，少了静态类型语言必须声明变量类型的累赘，但也缺失了编译时类型检查和编译时优化的好处。cljs虽然作为动态类型语言，但其提供Metadata让我们在必要的时候可选择地补充类型提示，以便提高代码可读性和供编译器优化使用。除了上述以外，Metadata还让我们在不影响对象本质的前提下，附加额外信息增强元编程能力。 Metadata附加的目标首先要明确一点的是，Metadata不是任何对象/值都拥有的。只有如下的对象才可附加Metadata Symbol Var Collections(L

2018-07-11

2410

(cljs/run-at (JSVM. :all) "一次说白DataType、Record和Protocol")

前言在项目中我们一般会为实际问题域定义领域数据模型，譬如开发VDOM时自然而言就会定义个VNode数据类型，用于打包存储、操作相关数据。clj/cljs不单内置了List、Vector、Set和Map等数据结构，还提供deftype和defrecord让我们可以自定义数据结构，以满足实际开发需求。定义数据结构从Data Type和Record开始提及数据结构很自然就想起C语言中的struct，结构中只有字段并没有定义任何方法，而这也是deftype和defrecord最基础的玩法。示例 (de

2018-07-11

4620

(cljs/run-at (JSVM. :all) "细说函数")

前言作为一门函数式编程语言，深入了解函数的定义和使用自然是十分重要的事情，下面我们一起来学习吧！ 3种基础定义方法 defn 定义语法 (defn name [params*] exprs*)

2018-07-11

3640

CSS魔法堂：更丰富的前端动效by CSS Animation

在《CSS魔法堂：Transition就这么好玩》中我们了解到对于简单的补间动画，我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢？答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时，我们必须转向CSS Animation了。本文为这段时间学习的记录，欢迎拍砖。

2018-07-10

1.3K1

CSS魔法堂：Transition就这么好玩

以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。

2018-06-21

4900

CSS魔法堂：Flex布局

Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。

2018-06-21

5100

(cljs/run-at (JSVM. :all) "一次说白DataType、Record和Protocol")

前言在项目中我们一般会为实际问题域定义领域数据模型，譬如开发VDOM时自然而言就会定义个VNode数据类型，用于打包存储、操作相关数据。clj/cljs不单内置了List、Vector、Set和Map等数据结构，还提供deftype和defrecord让我们可以自定义数据结构，以满足实际开发需求。定义数据结构从Data Type和Record开始提及数据结构很自然就想起C语言中的struct，结构中只有字段并没有定义任何方法，而这也是deftype和defrecord最基础的玩法。示例 (de

2018-01-18

7600

(cljs/run-at (JSVM. :all) "Metadata就这样哦")

前言动态类型语言，少了静态类型语言必须声明变量类型的累赘，但也缺失了编译时类型检查和编译时优化的好处。cljs虽然作为动态类型语言，但其提供Metadata让我们在必要的时候可选择地补充类型提示，以便提高代码可读性和供编译器优化使用。除了上述以外，Metadata还让我们在不影响对象本质的前提下，附加额外信息增强元编程能力。 Metadata附加的目标首先要明确一点的是，Metadata不是任何对象/值都拥有的。只有如下的对象才可附加Metadata Symbol Var Collections(L

2018-01-18

5680

让BASH,VIM美美的Powerline

前言鉴于BASH及其周边强大的工具以及VIM高效快捷，加上现在我工作重心转移到前端开发上，因此我华丽地转向Linux阵营(当然从最傻瓜式的Ubuntu开始啦!)。但BASH和VIM默认样式确实颜值

2018-01-18

7410

让VIM支持Python2 by update-alternatives

前言 Ubuntu 16+中$ sudo apt install vim所安装的vim只支持Python3，但很多插件如YCM和powerline均需要Python2，那就来场“生命贵在折腾”吧！自检在shell中输入以下命令，若出现-python则表示不支持Python2，+python则表示支持;-python3表示不支持Python3，+python3则表示支持。 $ vim --version | grep python 安装 1.安装 $ sudo apt install vim-nox-

2018-01-18

1.1K0

WebComponent魔法堂:深究Custom Element 之标准构建

前言通过《WebComponent魔法堂:深究Custom Element 之面向痛点编程》，我们明白到其实Custom Element并不是什么新东西，我们甚至可以在IE5.5上定义自己的alert元素。但这种简单粗暴的自定义元素并不是我们需要的，我们需要的是具有以下特点的自定义元素：自定义元素可通过原有的方式实例化(<custom-element></custom-element>,new CustomElement()和document.createElement('CUSTOM-ELEMEN

2018-01-18

9150

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态