按钮是为任何网络应用程序提供交互性的最常见方式。但我们经常倾向于使用其他HTML元素,如 div span 等作为 clickable 元素。
作为一名 7 年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。
30年前,Tim Berners-Lee 在欧洲核子研究中心创建了第一个 Web 网页,宣告了万维网的诞生。自此,万维网就承载着开放平等的愿景。
手风琴是个垂直罗列的元素组合,例如标签或缩略图,这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动,当在单个页面中呈现很多内容模块时。
📷 前言 Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月(几乎每个版本都是这个节奏😳),Ng-Matero 也终于更新到了 v15。其实 Ng-Matero 本身的更新非常简单,但是同步维护的 Material Extensions 这个库要先于 Ng-Matero 发布,所以大部分精力都耗费在组件库上面了。 我已经很久没有写关于 Ng-Matero 的发版文章了。上次介绍发版还是 v10 版本,竟然已经是两年前的事情了。在这两年的开源生涯中,主要精力都在 Materi
三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。
面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。
这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。
10步大幅提升网站可访问性:1. 检查<title>标签;2. 提供文字替代方案;3. 检查表单;4. 使用heading做信息架构;5. 减少焦点劫持;6. 按Ctrl+或command+查看页面缩放;7. 添加landmark角色;8. 设置快捷键;9. 触发界面转换需设置焦点;10. 填写一个简单的链接到<body>之后作为第一个内容元素。
来源:FEWY https://segmentfault.com/a/1190000012143176 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。 快捷键 快捷键比较多,这里挑出几个常用的说一下 最后会给出一张比较完整的快捷键的表 下列快捷键可以在所有 开发者工具 面板中可以使用 全局快捷键windowMac打开 开发者工
一个 Web 页面,一个 APP,想让别人用的爽,也就是所谓的良好的用户体验,我觉得他可能包括但不限于:
focus 伪类 :focus 表示被点击、触摸或 tab 选中的元素,笼统地说就是「获得焦点」的元素。
有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。
严格意义上来说,我是一名前端开发,清楚地记得我参与过的项目曾花费大量的人力和时间对网站的UI进行重新改版设计,尽可能多地吸引用户,也曾花费大量人力和时间优化网站的性能,想方设法地提高首屏加载速度,追求极致的性能体验。
截至 2017 年 6 月,中国网民规模达 7.51 亿,中国手机网民规模达 7.24 亿, 中国网民中农村网民占比 26.7%,规模为 2.01 亿。
过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理。
可能有人会觉得 Switch 组件非常简单,有什么好说的呢?其实 Switch 组件源码洋洋洒洒 近千行 ,其中关于主题处理、平台适配、事件处理、动画处理、绘制处理 都有值得我们学习的地方。那么废话不多说,来一起看看 Switch 是怎么炼成的吧。
一个 Web 页面或是一个 App,想让别人用得爽,获得良好的用户体验,可能需要包括但不限于:
1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀。 2.常用技巧 2.1 通过Alt+F8查看变量
在性能几近无懈可击的情况下,我们决定从稳定性入手,为项目引入强类型校验,弥补 JavaScript 这种弱类型语言在不可预测性上的缺陷。
局部属性:有些元素能规定自己的属性,这种属性称为局部属性。 比如 link 元素,它具有的局部属性有 href、 rel、 hreflang、 media、 type、 sizes 这六个。 全局属性:可以用来配置所有元素共有的行为,这种属性称为全局属性,可以用在任何一个元素身上。
本文将介绍一个不太实用的小技巧,使用 tabindex 配合 :focus-within 巧妙实现父选择器。
点击上方蓝色“程序猿DD”,选择“设为星标” 回复“资源”获取独家整理的学习资料! 前言 最近天气变冷,就想着和以前的老友聚一聚,大家吃吃火锅喝喝小酒,怀念当初一起加班编码的日子。有位已经退居二线不在一线开发岗位的老友跟我自嘲到,“现在刚入职的年轻人都喜欢用VS Code,仿佛我这种喜欢用Eclipse的像老古董一样~”。先不说这VS Code和Eclipse是否合适进行比较孰优孰劣,现状就是越来越多的人喜欢用VS Code,因为更轻便,对插件扩展的支持更丰富。很多人想必对VS Code都有自己的独门使用
一切开始前,我们先来认识一下苹果 Mac 键盘上几个陌生的按键,比如 ⌘ (Command / Cmd)、⌥ (Option)、⌃ (control)、⇧ (shift)等等。
是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开input[type=radio]重新开发一个,发现要模拟选中、未选中、不可用等状态很繁琐,而涉及单选框组就更烦人了,其实我们可以通过label、::before、:checked和tabindex,然后外加少量JavaScript脚本就能很好地模拟出一个样式更丰富的“原生”单选框。下面我们一起来尝试吧!
Bootstrap是一个用于快速开发Web 应用程序和网站的前端框架,它提供了一个带有网格系统、链接样式、背景的基本结构。Bootstrap提供了许多的组件,其中就包括导航组件。这在很大程度上简化了操作。通常都是利用列表实现来导航的,常用的是无序列表()和有序列表()。自定义列表()一般不会用来实现导航。
📷 因为上一篇《设计提效-Figma插件篇》的不错反响,所以QQ团队的设计师们继续整理了一批超实用的提效秘籍,希望能助力大家一顿快捷操作猛如虎,早早打卡下班不辛苦。 一、快捷键面板|宝典大全
Web 平台概念有时可能完全不同,但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。 我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似,至少在我看来是这样的,那就让我们开始吧!
键表文件是以JSON或者CSON编码的文件,其中含有嵌套的哈希表。它们的工作方式像是样式表,但是它们指定匹配选择器的元素的快捷键的作用,而不是应用样式属性。下面是一些快捷键的例子,它们在atom-text-editor元素上按下时生效:
很多朋友在尝试用Power Automate去控制Power BI,实现数据的自动刷新。
HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。 快速生成HTML结构语法 快速生成CSS样式语法
这款 Chrome 插件可以对浏览器收藏书签、Tab 页面、历史记录进行快速搜索、切换、关闭等功能
Atom的界面使用HTML渲染,并且通过Less来定义样式,它是CSS的超集。不要担心之前从未听说过Less,它类似于CSS,但是带有一些便捷的扩展。
我想表达的是「需要导航能力的可点击元素」(Link Button是为了方便沟通而创造的名词)
为了照顾读者中一部分对 Tampermonkey(国内成油猴,以下都简称 TM)不熟悉的读者,这里我借助官方对 TM 的介绍和教程帮助入门用户做以下介绍。
说到这款 IDEA,很早就想写一篇关于它的文章了,可不知从何处写起,刚好一位师弟问起我来,正好写一篇入门文章,本文的涉及的快捷键主要针对于 Windows系统「因大部分读者都在使用此系统」。
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用c
html的属性,瀚若星河,有些是平时经常用到的,有些是平时不常用的,还有一些基本用不到。
Winform控件是Windows Forms中的用户界面元素,它们可以用于创建Windows应用程序的各种视觉和交互组件,例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为,从而创建功能强大的桌面应用程序。
这5个都是伪类,表示5种状态,其中link与visited是超链接专用的,可以分类到链接伪类,而focus,hover和active除了用于超链接还适用于其它元素,称为动态伪类
在思维导图XMind 中,快捷键是可以大大提高绘图效率的存在。掌握常用的快捷键组合,就可以在键盘上运指如飞,快速地进行思维导图的绘制。还在等什么?感兴趣的朋友,下面就和小编一起来看看吧!
chrome devtools 是前端开发再也熟悉不过的调试工具了。那么我们究竟有多了解它,这里总结了一些常用的CSS调试操作。
规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。
在 XMind: ZEN 中,快捷键是可以大大提高绘图效率的存在。掌握常用的快捷键组合,就可以在键盘上运指如飞,快速地进行思维导图的绘制。还在等什么?感兴趣的朋友,下面就和小编一起来看看吧!
为了让初次用 Mac 的新手和小白们更快地上手,小编整理了一份Mac 常用快捷键列表,虽然都是比较基础的入门知识,但也能帮助到大家更快地学习和查找 macOS 的键盘快捷键,以此提高电脑的操作效率。
领取专属 10元无门槛券
手把手带您无忧上云