FE.UX-常见CSS边界情况防御处理

2022-01-02
阅读 2 分钟
1.7k
遵循这种心态至少会减少您可能遇到的问题。对于这个组件,标题可以是一个词,也可以是多个词。为避免标题卡在右侧的图标上,最好添加margin-right: 1rem,以防标题变长。如果一个按钮与另一个按钮相邻,则为第二个按钮添加一个左边距,以防万一 {代码...} 第一个解决方案是使用文本截断 & max-width。第二个只使用ma...

关于如何在 CSS 中为 RTL 设置样式的广泛指南

2021-06-24
阅读 17 分钟
11.4k
全世界有超过 2.92 亿人将阿拉伯语作为他们的第一语言。阿拉伯语(al-Arabiyyah,发音为 /al ʕarabijja/,/ʕarabiː/)是我的母语,我有时会构建需要同时支持从左到右 (LTR) 和从右到左 (RTL) 样式的网站。
封面图

FE.ARIA-审核设计系统的可访问性(译)

2021-05-21
阅读 10 分钟
2.6k
自2012年开始我的职业生涯以来,关于包容性设计的知识一直受到阻碍和教学空白的束缚。我的志向是帮助设计师解除阻碍,开发人员和技术人员想要建立更好,更具包容性的体验。在这篇博客文章中,我希望特别告知我的同行设计师有关出于可访问性考虑而需要进入的地方。
封面图

FE.BASE-多版本webkit内核调试环境配置教程

2020-10-31
阅读 2 分钟
1.3k
由于工作中经常需要对低端手机做适配,务必离不开低版本的webview调试。我遇到过的Android 5.0+系统webview是37+的。而chrome < 60在手机直连调试时用chrome无法inspect。于是变换策略决定想办法在电脑中跑多个版本的chrome。

FE.CSS-选择器与伪类使用技巧

2019-10-04
阅读 2 分钟
1.5k
引用文字 内容来自《CSS选择器世界》 css选择符辨析 (空格) 后代 选择器优先级相同,后来居上 document.querySelector('#myId').querySelectorAll(':scope div div') > 子 主要目的:避免冲突 场景:状态类名控制、标签受限、层级位置与动态判断 + 相邻 为兼容IE8实现:first-child ~ 随后 随前实现:视觉在前,dom在...

FE.B-浏览器的工作原理:新式网络浏览器幕后揭秘

2019-04-05
阅读 27 分钟
1.6k
这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见 资源 ),并花了很多时间来研读网络浏览器的源代码。她写道:

FE.B-前端性能优化

2019-01-30
阅读 1 分钟
1.7k
http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache

FE.WEB-前端安全防范初识

2019-01-07
阅读 7 分钟
2.2k
xss-跨站脚本攻击概念:用户填写信息是可运行的 js 代码。 操作用户界面攻击源头:反射型 – 从url读取内容展示 {代码...} 存储型 - 从后台读取内容展示 {代码...} 防范手段:纯文本– html encode , js encode。由于内容可能在多端展示,所以不在提交的时候转义,只在展示的时候转义。 {代码...} {代码...} 富文本– 白名...
封面图

FE.CSS-理解Matrix,Flex,Grid

2018-12-30
阅读 5 分钟
1.9k
transform的matrix()方法写法如下:transform: matrix(a,b,c,d,e,f);新旧像素位置转换如下:$ \begin{bmatrix} a & c &e \\ b & d &f\\0 & 0 & 1 \end{bmatrix} *\begin{bmatrix} x \\ y \\1 \end{bmatrix}=\begin{bmatrix} ax+cy+e \\ bx+dy+f \\0+0+1 \end{bmatrix} \begin{matrix} ←x' \\ ←y...

FE.B-理解浏览器的同源策略与跨域方案

2018-12-21
阅读 1 分钟
1.2k
同源 概念:协议,域名,端口 相同。目的:保证用户信息的安全,防止恶意的网站窃取数据。限制的行为: Cookie、LocalStorage 和 IndexDB 无法读取。 DOM 无法获得。 AJAX 请求不能发送。 跨域 资源跳转: A链接、重定向、表单提交 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有...

FE.ES-异步编程进化史

2018-12-15
阅读 5 分钟
1.5k
本文通过实践从古至今对XMLHttpRequest封装的各种方式,来了解在es中异步编程的实现细节和设计模式。 回顾XMLHttpRequest原生写法 XMLHttpRequest -MDN {代码...} 常见封装方法 1.回调函数 传值方式实现 {代码...} 传对象方式实现 {代码...} 2.Promise 使用 Promise - MDNPromise 本质上是一个绑定了回调的对象,而不是...

FE.ES-理解ECMA Javascript的原型

2018-12-06
阅读 8 分钟
1.3k
字面量对象字面量 var a = {};数组字面量 var arr = [1,2,3];正则表达式字面量 var reg = /[a-z]/g;

FE.ES-理解ECMA Javascript的this

2018-11-24
阅读 4 分钟
1.5k
无论是否在严格模式下,在全局执行上下文中(在任何函数体外部)this 都指代全局对象。(MDN)在严格模式下,this将保持他进入执行上下文时的值,如果 this 没有被执行上下文(execution context)定义,那它将保持为 undefined。(MDN)

FE.ES-理解ECMA Javascript作用域

2018-11-23
阅读 6 分钟
1.4k
作用域是一套规则,用于确定在何处以及如何查找变量(标识符)。如果查找的目的是对变量进行赋值,那么就会使用 LHS 查询;如果目的是获取变量的值,就会使用 RHS 查询。赋值操作符会导致 LHS 查询。 = 操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。

FE.TEST-前端测试初探

2018-11-08
阅读 4 分钟
2.6k
测试可以提供快速反馈,根据测试用例覆盖代码,从而提升代码开发效率和质量。根据投入产出价值,通常迭代较快的业务逻辑不做测试用例,对通用常用的代码基本组件或框架需要编写测试。

FE.CSS-Sultana后记:纯css也能写col,select,datepicker,carousel...

2018-05-07
阅读 11 分钟
2.7k
如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践,我发现自定义原生控件并不是什么难事,于是小试牛刀写了个 纯CSS3实现Material Design。