创建一个Filter只需两个步骤:
(1)创建Filter 处理类:
(2)在web.xml文件中配置Filter 。
创建Filter 必须实现javax.servlet.Filter 接口，在该接口中定义了三个方法。
• void init(FilterConfig config): 用于完成Filter 的初始化。
• void destroy(): 用于Filter 销毁前，完成某些资源的回收。
• void doFilter(ServletRequest request, ServletResponse response,FilterChain chain): 实现过滤功能，该方法就是对每个请求及响应增加的额外处理。
过滤器Filter也具有生命周期：init()->doFilter()->destroy()，由部署文件中的filter元素驱动。
参照编码过滤器示例来查看怎么实现的
首先配置在web.xml文件里的规则如下
<filter> <filter-name>encodingFilterfilter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class> <init-param> <param-name>encodingparam-name> <param-value>utf-8param-value> init-param> <init-param> <param-name>forceEncodingparam-name> <param-value>trueparam-value> init-param> filter> <filter-mapping> <filter-name>encodingFilterfilter-name> <url-pattern>*.dourl-pattern> filter-mapping>
其中，filter-class 为过滤器Filter类，init-prama为注入的set参数
Filter-mapping中的url-pattern为过滤的url类型
类的继承关系
CharacterEncodingFilterr类继承了OncePerRequestFilter类
public class CharacterEncodingFilter extends OncePerRequestFilter
而OncePerRequestFilter类又继承了GenericFilterBean类
public abstract class OncePerRequestFilter extends GenericFilterBean
public abstract class GenericFilterBean implements
Filter, BeanNameAware, EnvironmentAware, ServletContextAware, InitializingBean, DisposableBean
设置编码的核心代码为
@Override protected void doFilterInternal( HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { if (this.encoding != null && (this.forceEncoding || request.getCharacterEncoding() == null)) { request.setCharacterEncoding(this.encoding); if (this.forceEncoding) { response.setCharacterEncoding(this.encoding); } } filterChain.doFilter(request, response); }
其中filterChain为过滤器链，表示执行完这个过滤器之后接着执行下一个过滤器
区别
我们在使用过滤器时，通常没必要知道GenericFilterBean、OncePerRequestFilter和AbstractRequestLoggingFilter，但不防碍我们了解这几个类，就上文所述，AbstractRequestLoggingFilter继承自OncePerRequestFilter，OncePerRequestFilter继承自GenericFilterBean，所以我们知道，genericFilterBean是任何类型的过滤器的一个比较方便的超类，这个类主要实现的就是从web.xml文件中取得init-param中设定的值，然后对Filter进行初始化（当然，其子类可以覆盖init方法）。
OncePerRequestFilter继承自GenericFilterBean，那么它自然知道怎么去获取配置文件中的属性及其值，所以其重点不在于取值，而在于确保在接收到一个request后，每个filter只执行一次，它的子类只需要关注Filter的具体实现即doFilterInternal。
AbstractRequestLoggingFilter是对OncePerRequestFilter的扩展，它除了遗传了其父类及祖先类的所有功能外，还在doFilterInternal中决定了在过滤之前和之后执行的事件，它的子类关注的是beforeRequest和afterRequest。
总体来说，这三个类分别执行了Filter的某部分功能，当然，具体如何执行由它们的子类规定，若你需要实现自己的过滤器，也可以根据上文所述继承你所需要的类。
原文链接：
4种方案解决CSS浏览器兼容性问题
前言
前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了，更让人头疼的是，还要面临各种适配、兼容性问题。
为什么会有性问题？
还不是因为浏览器厂商太多了！
Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……
关键是不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。
多么希望Chrome能够一统江湖啊
目前各浏览器市场份额
浏览器这么多，我们也不可能每一个都要去兼容，对于用户量一般的产品，把主流浏览器的适配做好，就已经很不错啦。
根据百度流量研究院提供的2018年8月至2019年2月的数据可以看出，Chrome占比46.28%，IE系仍然占有很大比重，任重而道远啊~
CSS浏览器兼容性问题的解决思路和方案
今天，不想去关注太多细节问题， 比如那个css样式需要我们去兼容，而是想讨论一下大的解决思路，主要包括4个方面，浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件。
1. 浏览器CSS样式初始化
由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样。
代码语言：javascript
复制
*{
margin: 0;
padding: 0;
}关于浏览器CSS样式初始化，经验不丰富的话，可能也不知道该初始化什么，这里给大家推荐一个库，， star数量接近3.4万，选取展示其中几个样式设置，如下
代码语言：javascript
复制
html {
line-height: 1.15; /* Correct the line height in all browsers */
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}
body {
margin: 0;
}
a {
background-color: transparent; /* Remove the gray background on active links in IE 10. */
}
img {
border-style: none; /* Remove the border on images inside links in IE 10. */
}通过CSS样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。
2. 浏览器私有属性
我们经常会在某个CSS的属性前添加一些前缀，比如-webkit-，-moz- ，-ms-，这些就是浏览器的私有属性。
为什么会出现私有属性呢？这是因为制定HTML和CSS标准的组织W3C动作是很慢的。
通常，有W3C组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但W3C制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。
但是为避免日后W3C公布标准时有所变更，会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后W3C公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。常用的前缀有：
对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面
代码语言：javascript
复制
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); 每个CSS属性写这么一堆兼容性代码，无疑是对生命最大的浪费，后面我们会讲一下通过自动化插件来处理这块。
3. CSS hack
有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS hack的写法大致归纳为3种：条件hack、属性级hack、选择符级hack。
条件hack
条件hack主要针对IE浏览器进行一些特殊的设置
代码语言：javascript
复制
keywords
if后面跟的条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：选择除指定版本外的所有IE版本。关键字：!
version
IE浏览器版本，如6、7、8
IE10及以上版本已将条件注释特性移除，使用时需注意。
代码语言：javascript
复制
属性级hack
属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。
代码语言：javascript
复制
selector{?property:value?;} ：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（）更为合适。
：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（）的认知度更高
\9：选择IE6+
\0：选择IE8+和Opera15以下的浏览器
如在不同的IE浏览器中设置不同的颜色，注意顺序：低版本的兼容性写法放到最后
代码语言：javascript
复制
.test {
color: #090\9; /* For IE8+ */
*color: #f00; /* For IE7 and earlier */
_color: #ff0; /* For IE6 and earlier */
}选择符级hack
选择符级hack是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
代码语言：javascript
复制
selector{ sRules } 代码语言：javascript
复制
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效代码语言：javascript
复制
* html .test { color: #090; } /* For IE6 and earlier */
* + html .test { color: #ff0; } /* For IE7 */看到这里，我不得不为前端人员自豪，这也太难了吧
不过花大力气解决这些兼容性问题， 并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了，随着时间的流逝，这些技术的价值也会越来越小，怎么花最小的力气解决，让我们把更多的时间留给美好的生活，才是关键，好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理。
4. 自动化插件
是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
把添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。
代码语言：javascript
复制
//我们编写的代码
div {
transform: rotate(30deg);
}
// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置
div {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}目前webpack、gulp、grunt都有相应的插件，如果还没有使用，那就赶紧应用到我们的项目中吧，别再让CSS兼容性浪费你的时间！
