严文彬
在谷歌浏览器中，当图片加载失败时呈现如下 ```html ```  很难看不是吗? ## 现有的解决方法 网上这类问题的解决方式大多都是直接监听`onerror`方法 ```html ``` 这种写法最为简单，但是风险也高，如果赋值的`src`也失败的话，那就无限循环了  当然，可以设定`this.onerror=null`只执行一次 ```html ``` 虽然这样可以阻止无限循环，但是如果第二次加载失败，就回到了最初状态，还是很难看 ## 稍微好一点的方法 在上面的基础上，如何更好的优化呢？首先我们必须保证`onerror`里面的图片一定要加载成功。如果保证成功呢？线上的肯定不行，可以设置一张`base64`的图片，这样就能保证一定加载成功了 ```html ``` 尽管能保证加载成功，但是这`html`结构也太难看了吧，洋洋洒洒的一大片。 进一步，我们可以设置一张很小的图片，比如1像素的gif。其实只要图片存在，就不会出现文章头部的那张加载失败的图片。然后，再设置背景图片，就可以达到默认图的效果了 ```html ``` ```css img{ background:url('head.jpg') #eee }...
按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？  通常这类效果第一反应可能就是借助`canvas`了，比如下面这个[案例](https://codepen.io/airen/pen/JBJwWB)  效果就更加震撼了，当然`canvas`实现也有一定的门槛，而且实际使用起来也略微麻烦（所有`js`实现的通病），这里尝试一下`CSS`的实现方式。 ## 生成粒子 抛开`js`方案，还有`HTML`和`CSS`实现方式。`HTML`就不用说了，直接写上大量的标签 ```html button ... ``` 一般情况下我不是很喜欢这种方式，标签太多，结构不美观，而且有可能对现有的页面造成其他影响（很多情况下并不方便修改原始`HTML`结构） 那么来看看`CSS`实现方式，主要也是两种方式，其实就是想一下有哪些属性可以无限叠加，一个是`box-shadow`，还有一个是`background-image`（CSS3支持无限叠加）。 ### 1.box-shadow 我们先看看`box-shadow`方式，为了避免使用额外标签，这里采用伪元素生成。 ```css .button::before{ position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color:...
> 原文链接 > [https://github.com/XboxYan/notes/issues/13](https://github.com/XboxYan/notes/issues/13) ## 很久以前 刚入前端那会，产品经理提出了这样一个需求 > 这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左，不然居中显示很奇怪，因为最后一行是吊着的  琢磨了一下，当时我还真按照产品经理的逻辑，通过`js`判断一下文字的高度，如果超过一行，就添加一个类名，而且这样的文字很多地方都有，所以还做了遍历，还有最重要的一点是关于方法执行的时机，有可能刚加载的时候高度还获取不到（当时好像还用了定时器，还造成了先居中随后居左跳动的现象）... ```js //伪代码 $('.text').each(function(){ if($(this).height()>30){ $(this).addClass('mul'); } }) ``` 然后这些文本有可能还是动态生成的，所以还得在生成文本的地方再调用一次这个方法，功能是做出来了，可别说有多啰嗦了，体验也不咋地（虽然外面的人看不到） 当时也在想，如果是`CSS`实现，那么就完全不用考虑这些问题了！ ## 关于CSS实现思路 其实只要你逻辑清晰，`js`都能实现出来，按照正常的思路一步一步走下来就行了。`CSS`可不是这样，她需要你有更多的想象力。 比如上面这种需求，表面上来看是需要判断文本行数，这完全不是`CSS`能干的事呀，不过我们可以换个方向思考，文本默认是居左的（默认文本流），只有首行是居中的，首行可以联想到`::first-line`伪元素，所以可以试着这样实现一下 ```html 这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左 ``` ```css p::first-line{...
分割线是网页中比较常见的一类设计了，比如说知乎的更多回答  > 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现，很显然是用一块白色背景覆盖的，加一点背景就露馅了  心想：~~知乎的前端也不怎么样？~~ 可能别人的重点不在这些上面吧 下面列举几种更好的实现方式，不会露馅的那种 ## 1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中`text-align: center;`，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着**水平居中**的，设置足够的宽度，然后把左边的往左位移`100%`就可以了，父级记得超出隐藏。 具体实现如下 `html`结构为 ```html 我是分割线 ``` `css`样式为 ```css .title{ position: relative; text-align: center; overflow: hidden; font-size: 14px; color:...
可能有很多小伙伴还不清楚`display:contents`是个什么鬼，这里简单介绍一下 > 浏览器会将所有将 `display` 设置为 `contents` 的元素从可访问性树中移除，但内容保留。 这是什么意思呢？简单来讲，设置了 `display` 为 `contents`的元素就好像不存在，跟没有这一层元素的效果一样。 // 未完
`input`可能是平时网页中使用最多的标签之一了，但凡需要输入的地方都少不了。 毕竟输入是一件比较麻烦的事情，所以浏览器也做出了许多便于输入的地方，比方说自动填充  > 一般情况下，在表单提交的时候浏览器会自动记录提交的内容 这个功能本来是很好的，不过当自动填充后，输入框背景会自动变成淡紫色（以前是x黄色，仅限谷歌浏览器），设计师（但凡有点审美的前端）看到了肯定就不干了，毕竟还是挺违和的，那么何如去除这个默认的背景呢？ ## 背景是如何产生的 按照以往的经验，如果要修改标签默认的样式，首先肯定是查看标签的默认样式，如下  比较好理解，当自动填充时会激活`:-internal-autofill-selected`伪类，然后就变成了淡紫色。 如果我们设置样式覆盖 ```css input:-internal-autofill-selected{ background: red!important; } ``` 虽然样式覆盖了，然而并没有什么用，仍然是默认的淡紫色（要是起作用的话就不会专门去研究这个了），原因不明... ## 现有的解决方式 网上普遍的解决方式主要有两种： ### 1. 使用内阴影进行覆盖 既然背景改变不了，那么就找个东西覆盖呗 ```css input{ box-shadow: 0...
## 拖拽的实现 在HTML5还未普及之前，实现元素的拖拽还算是一件比较麻烦的事，大概思路就是监听鼠标移动相关事件，下面是伪代码 ```js oDiv.onmousedown = function(ev){ //记录起始位置 } document.onmousemove = function(ev){ //移动目标元素 } document.onmouseup = function(ev){ //取消鼠标移动事件 } ``` HTML5新增了拖放`draggable`标准，拖拽就变得简单了，只需要通过监听元素的拖放事件就能实现各种拖放功能。 ```html drag me ``` > 除了设置`draggable="true"`属性外，默认情况下`img`、链接默认是可拖拽的 当然，设置`draggable="true"`元素仅仅是“可拖拽”，松手后就还原，如果需要拖拽到指定位置仅需要在`drop`记录一下就行了 ```js dropbox.addEventListener('drop',function(ev){...
CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。 > 很多都是开脑洞想出来的，实现效果却意外的惊人 [https://github.com/XboxYan/notes/issues/4](https://github.com/XboxYan/notes/issues/4) ## 事件禁用 在js中对事件禁用并不复杂，但是却容易影响到业务逻辑 ```js function buy(){ if(XX){ return false; } //其他业务代码 } ``` 当然，元素也要设置相应的样式，让它看起来不可点击。 css对事件禁用就比较简单了，主要有两种方式 **1. disabled** 原生表单元素是有默认的禁用属性的，比如 ```html 按钮 ```  可以看出，禁用的默认样式为 ```css button:disabled {...
在平时的项目中会经常碰到这样一种布局，暂且称之为多级菜单吧  （截图来自于[ant-design](https://ant.design/components/menu-cn/)） 这类布局也很容易，大概就是这样`ul`和`li`嵌套，如下 ```html Navigation01 Option01 Option02 Submenu Option03 Option04 Navigation02 ``` 于是就得到下面一个很原始的样式。  再经过简单的修饰就可以达到上面的效果了。 当然，这个很容易，一般情况下我们是通过设置内边距来完成的，比如默认为 ```css ul{ padding-left:40px; } ``` 然后每一层级跟随父级逐步累积，然后就实现了，层级越深，距离左边的缩进越多的效果。 ## 多级菜单选中范围 通过上面的布局和样式，很显然每一项的选择范围都是逐步缩进的，  但是，可能设计师觉得不好看，往往会设计成通栏的形式，比如像上面[ant-design](https://ant.design/components/menu-cn/)的设计  那么，该如何处理呢？...