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

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

DeveWork

https://devework.com

专栏作者

265

文章

451221

阅读量

55

订阅数

postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

sass 单片机 http postcss css

postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其CSS 的插件，经过半年持续迭代，现已稳定用在旗下两款产品的Web 业务中。其与市面上的雪碧图插件不同在于生成雪碧图的“懒惰”姿势。前言前端界，伴随着雪碧图这个概念出现，自动化产生雪碧图这类工具就层出不穷。无论是早期GUI 工具，还是现在流行的配合Gulp/Grunt/Webpack 这类构建工具而产生的雪碧图插件。总之是百花齐放，长江后浪推前浪，后浪死在沙滩上。根据输入方式的不同，现在市面上基于Node.js

2018-01-22

1.6K0

从0到1：PostCSS 插件开发最佳实践

单片机 php http css postcss

前阵子为了满足工作上的一个需求开发了一个PostCSS 插件，后来也将这个插件提交给PostCSS 官方并得到认可。在这篇文章中笔者将记录开发过程中遇到的一些问题，且斗胆将之称为“最佳实践”，希望对有兴趣尝试PostCSS 插件开发的您有所帮助。简介篇开发成果展示首先先上成果：https://github.com/Jeff2Ma/postcss-lazyimagecss （欢迎给个star 哦~） postcss-lazyimagecss 插件实现的功能是为 CSS 中的background-imag

2018-01-22

1.1K0

CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的区别

写 CSS 时候经常遇到要为弹窗浮层这些进行 class 命名的情况，之前对于Dialog, Modal, Popup, Flash，Tooltip等这类命名一直处于混用的情况。通过Quora 上的一

2018-01-22

4.6K0

巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

:target 是CSS3 中新增的一个伪类，用以匹配当前页面的URI中某个标志符的目标元素（比如说当前页面URL下添加#comment就会定位到id=“comment”的位置，俗称锚）。CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。先上效果图正如标题所说，本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单，原生HTML+CSS，无JavaScript。为了吸引各位往下看，先上实际例子，再进行剖析。 Duang~ 实际例子其实就是De

2018-01-22

3.9K0

JGulp: 利用Gulp 配置的前端项目自动化工作流

gulp sass css 打包 grunt

商业竞争时代的Web 开发，效率越来越成为其中决胜的关键因素之一。在前几年的时候，前端是一片荒芜的待开垦之地，开发者更多考虑开阔更多技术疆域；而最近几年，在前端技术这种更新迭代快到连裸奔都追不上的情况下，在强调高产的同时，效率必然是成为争夺的制高点。引子在苦苦构思了上面的开头后，从“效率”这个词Jeff 引出了今天话题——也就是标题说的前端项目自动化工作流。也许你还不全懂诸如“前端自动化”“工作流（workflow）”这些名词，不急且让我列举下面的场景：在刚刚过去的时代（恩对于很多人来说是他们正在经历

2018-01-22

1.1K0

移动Web 开发中的 Off Canvas 导航

http css canvas jquery android

Jeff 最近发布的DeveMobile 与EaseMobile 主题在导航栏上采用的是在一些native app 中常见的Off Canvas 导航。而关于 Off Canvas 导航，这里提供结合开发主题过程及网络上的资料，从个人认知的角度介绍下 Off Canvas 导航。 Off Canvas 简介 Off Canvas 导航相比也不陌生，在一些安卓应用（如谷歌的一些官方应用、易信、WordPress 安卓版）上常常能到——看到当你点击应用中的一个按钮时，会从左边或者右边侧拉出一个菜单。移动设备中空

2018-01-19

1.7K0

Web 前端利器Emmet 的CSS 用法总结

承接上文《Web 前端利器Emmet 的HTML用法总结》，这篇主要是Emmet 的 html的好基友——CSS 的用法。原文来自tutsplus，由w3cplus 翻译，感谢所有原作者。属性 CS

2018-01-19

7040

Foundation：高级的响应式前端框架

对于前端框架，Jeff 了解Bootstrap 甚于这个Foundation（貌似在写该文之前还没听说过Foundation）。所以，今天在这里恶补一下，介绍一下这个高级的响应式前端框架（The most advanced responsive front-end framework in the world）——Foundation 框架。简介 Foundation 前端框架官方地址：http://foundation.zurb.com/ Foundation 是一款开源的前端框架，我们可以使用它快速创

2018-01-19

1.5K0

CSS Auto Reload：解放F5 键，自动刷新浏览器的前端利器（Chrome 扩展）

在进行前端开发的时候（本文具体而言是编辑CSS 文件时候），常常要做的是刷新浏览器查看修改后的样式。那么最常用到的就是F5 键了，以前在开发WordPress 主题的时候Jeff 都是傻傻按F5 刷新，一次开发下来F5 键的位置常常是油腻腻的，还担心坏了。不过，有了这个chrome扩展，一切都成为过去式；唉，相见恨晚啊~ CSS Auto Reload 介绍 css auto reload 是一款 chrome 开发者插件。它可以在你编辑 css 的时候，自动在页面上重新载入最新的 css 文件，以达到立

2018-01-19

1.8K0

CSS 代码的书写规范、顺序

本文来自设计达人网站，Jeff 看到该文感觉非常有必要学习分享，so，转载在这里，感谢原作者——写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。 CSS书写顺序位置属性(position, top, right, z-index, display, float等) 大小(width, heig

2018-01-19

3.4K0

Web 前端性能优化相关内容解析

css javascript 缓存 http html

Web 前端性能优化相关内容，来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相关说明。大家可以对照着去优化自己的网站或者相关项目。本文由Jeff 整理。 0.提高服务器的响应速度砸钱的东西，但却最根本；搞好这一项，甚比下面任何一项。 1.优化样式表和脚本的排列顺序正确地排列外部样式表与外部和内嵌脚本的顺序，可增加下载时同时加载的数据量，并提高浏览器显示网页的速度。将样式表放在顶部，将脚本放在底部 2.使用浏览器

2018-01-19

2K0

Google Chrome 浏览器开发者工具使用教程

css html html5 http

对于Chrome 浏览器，除了占用内存的缺点，其他都很不错。对于Chrome 浏览器的开发者工具，Jeff 除了Elements、Resources、Network、Console这四个标签页用得比较多外，其他的都甚少理解。今天偶然看到一篇Chrome 浏览器开发者工具的使用教程，感觉不错，顺便转载在这里，感谢原作者的辛苦劳动。作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用

2018-01-19

4.6K0

删除 WordPress 导航菜单的多余 CSS 选择器

在默认情况下，WordPress 的导航菜单会输出很多如menu-item、menu-item-type-taxonomy、menu-item-object-category等加上 id 组成的CSS

2018-01-19

2.2K0

分享一款带尖角浮出公告栏样式

css wordpress 网站建设

这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏，这个广告栏是纯用css+html打造的，没有使用图片。该代码最初来自大前端，经过简单的改造Jeff 移植到了WordPress主题中。下面先给出演示地址先(当然，本站也算是一个演示地址)：带尖角浮出公告栏样式:演示地址做这个带尖角浮出公告栏最核心的代码就是那个小尖角,大前端的是用◆字符来制作的，制作三角形也可以用这个原理。据我所知，制作三角形的话还可以直接用css（好像border属性+margin=0），当然也可以直

2018-01-19

2.2K0

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象，在Chrome浏览器下，输入框有一个黄色的边框；而在其它WebKit浏览器（如Jeff使用的傲游浏览器）下，输入框的颜色是蓝色的（见下面的图片）。Jeff以为是

2018-01-19

2.1K0

没有更多了

社区活动

腾讯技术创作狂欢月

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

Python精品学习库

代码在线跑，知识轻松学

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

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

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

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