新提案,初识CSS的object-view-box属性
在开发时,一直希望有一种原生的CSS方式来裁剪图片,并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现,后面解释。在这篇文章中,将带领大家了解Jake Archibald在今年年初提出的新的CSS属性object-view-box。
阅读量: 338标签: 属性
解读 State of CSS 2022,让你早点下班的新特性
解决业务代码的 !important 问题。为什么业务代码需要用 !important 解决问题?因为 css 优先级由文件申明顺序有关,而现在大量业务使用动态插入 css 的方案
阅读量: 421标签: 特性
聊聊:autofill和autocomplete自动填充
表单自动填充是个好功能,因为可以省去用户自己输入的麻烦。比方说一个 name 属性值是 email 的输入框,聚焦点击后,可能就出现下图所示的邮箱列表:
阅读量: 71标签: 表单
CSS Flexbox 布局
Flexbox(弹性盒子)是 CSS3 中引入的一种强大且兼容性好的布局方法。使用 flexbox,可以很容易地处理好页面上的元素布局,并创建可以自动缩小和放大的动态用户界面。
阅读量: 70标签: 布局
为什么你开发的网页不应该大于 14KB?
虽然我们生活在一个宽带无处不在、4/5G 几乎全覆盖的时代,但网站加载缓慢还是常态,就算我们打开一个以文本为中心的新闻网站,都可能需要至少 30 秒才能开始阅读。毕竟在内容膨胀时代,一张照片就能轻易超过 1MB 大小
阅读量: 75标签: 网页
还在用定时器吗?借助 CSS 来监听事件
在使用mouseout​时还需要考虑 dom​ 嵌套结构,因为这些事件在父级 -> 子级的过程中仍然会触发,总之,细节会非常多,很容易误触发。
阅读量: 289标签: 定时器
使用纯Css实现网站换肤和焦点图切换动画
以上几个方案都可以实现一定程度上的换肤效果,但是如果是一些基础性的换肤,比如网站的背景样式,某个按钮的样式,某块内容区域的样式等等这种局部的换肤,我们能不能直接用css来实现呢?答案是可以的,接下来我们就来看纯看css如何实现网站换肤
阅读量: 252标签: 动画
整洁架构之CSS
虽然开发工具早已经从 preprocessor 进化到了 styled component 甚至是 functional css,但在我看来新的工具并没有让我们的样式代码写的更好,只是更快——也可能会让代码坏的更快。工具的繁荣并没有让那些导致代码难以维护的根本问题烟消云散
阅读量: 319标签: 架构
Web应用安全防护的十大误区
随着企业数字化转型的深入,越来越多的业务应用系统被部署到互联网平台上,这吸引了网络犯罪团伙的强烈关注,以Web攻击为代表的应用层安全威胁开始凸显。通过利用网站系统和Web服务程序的安全漏洞
阅读量: 73标签: 安全
自适应布局和响应式布局的区别?
响应式的概念覆盖了自适应,但响应式包含的东西更多,响应式的布局可以根据屏幕的大小自动调整页面的展示方式;自适应有一个致命缺点:如果屏幕尺寸太小
阅读量: 57标签: 布局
24个关于设备视窗口的 CSS 单位
过去CSS 有 4 个你必须知道的识别视窗口的单位,并且它们能够很好地处理每个可以想象的用例。然而,随着时间的推移和时代的变化,这 4 种视口单位现在不足以解决所有用例。
阅读量: 360标签: 单位
一种比css_scoped和css_module更优雅的避免css命名冲突小妙招
我们知道,简单的class名称容易造成css命名重复,比如你定义一个class;如果别人刚好也定义了一个className:.main,你的float:left就会影响到它。
阅读量: 102标签: 命名