【CSS3】特殊的属性归纳（一）

CSS3手册地址速查表

-webkit- 最终要用兼容性写法

（一）-webkit-tap-highlight-color    （mobile移动设备私有属性）

案列：

问题：遇到a链接和button未加事件在手机端点击仍有 点击效果，这时给它们都加属性disabled也没用。（我的手机型号是iphone5s）

解决：

清除默认效果

a,button{

-webkit-tap-highlight-color:rgba(255,0,0,0);

}

搜索时发现这个属性是有一定限制的（博友的笔记）

属性理解：

//webkit是iphone浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节

该属性只用于 iOS (iPhone和iPad)。当点击一个链接或者由Javascript定义的可点击元素时，移动设备对应区域就会出现一个半透明的灰色背景。

此时 重设-webkit-tap-highlight-color属性 为任何颜色；若想禁用这个高亮效果，设置颜色的透明度alpha值为0即可。如上案例。

原理：

mobile移动端，有事件监听的元素被点击时会被高亮显示 。当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击元素时，设置-webkit-tap-highlight-color属性就能覆盖默认显示的高亮颜色。 （该属性可只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。）

（二）-webkit-text-size-adjust

该属性本职用于mobile移动端。现在的桌面版webkit浏览器支持是因为Bug：Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS，该bug在最新版的WebKit Nightly Builds 里已被修复。

属性理解：

该属性用于处理 iPhone 在竖屏转横屏时的文字放大(  !!! 即使在viewport设置了maximumscale=1.0横屏时文字还是会放大 )。

该属性支持百分比写法（在mobile移动端中）。

一些区别：

 iOS 系统 iPhone和iPad的该属性-webkit-text-size-adjust的默认值是不同的。

   iPhone：     -webkit-text-size-adjust:auto;

   iPad    ：     -webkit-text-size-adjust:none;     （iPad默认不调节）

案例：

1 ) 禁止iPhone横竖屏切换时调节文字，设置-webkit-text-size-adjust:100%    (  !!!  不能设置-webkit-text-size-adjust:none;因为会导致桌面版webkit浏览器无法人为更改文字大小)

2 ) 解决chrome不支持字体小于12px，避开1)!!! 的部分。方法如下

  方法①   主要核心步骤代码

     var isChrome=!!window.chrome;     // js判断是否为chrome  (区分Safari和chrome的css hack还未知)

     font-size:12px;-webkit-transform:scale( 0.8 ); *font-size:10px;     //如需要展示10px的字号，css设置如左侧。搭配使用，利用scale缩小到合适值(注意scale若写在父级有背景会同样影响)  (*font-size:10px兼容ie，ie是支持12px字号及以下的)

  方法②  

      html{  -webkit-text-size-adjust:none;  }   //该属性值不可为 inherit 或 initial

     注意：定义的是html该属性，不能定义在body上，直接定义在body上会导致页面缩放失效。以上写法 body会继承html的样式

 （三）outline —— css轮廓

                             outline: outline-color  outline-style  outline-width | inherit ;

   CSS3新增属性 outline-offset: length|inherit;

当设置 outline:none; 轮廓不出现

案例：
1 ) 解决ie下点击a标签出现的虚线，web端设置 outline:none;   (  !!!  ie7及以下不识别该属性，添加a标签属性 hidefocus="true" )

   2  )   去除chrome默认的文本框聚焦时 边框的样式，设置  input,textarea{ outline:none; }

 （四）-webkit-appearance

   属性理解：

       -webkit-appearance用于 改变 按钮和其他控件 的外观，属性值归纳页

案例：

     1  )  解决 iOS下无法正常渲染按钮，设置 button{ -webkit-appearance:none; }     （问题原因:iOS的Safari有默认的按钮样式，如下图）

          

   2  )   web端 去除输入框、文本框、按钮默认样式，设置  input[type="text"],input[type="button"],textarea,button{  -webkit-appearance:none; }     (移动端不起作用)

           注意： input标签的type类型为radio、checkbox等设置该属性 -webkit-appearance:none;会导致该类型标签消失

  

 （五）-webkit-user-select

        -webkit-user-select: text  | none | all | element;

• text – 可以选择文本
• element – 可以选择文本，但选择范围受元素边界的约束
• none – 不可以选择文本
• auto – 如果该元素包含可编辑的文本（如输入元素或可编辑内容的元素），则可以选择文本。否则，元素内容是否可选择由父节点的值决定。

   属性理解：

      -webkit-user-select 控制网页内容的选择范围，用于 用户复制、选择 页面文字的权限。

       此属性不继承，一般设置body上规定整个body的文字都不会自动调整。 body{ -webkit-user-select:none; }

案例：

     1  )  禁止用户操作页面文字，设置  -webkit-user-select:none; 

     2 ） 解决一些 ios系统 某元素设置 -webkit-user-select:text 却无法选中的bug，步骤

            ①去掉body设置的 -webkit-touch-callout:none;

            ② 该元素的父元素也添加属性 -webkit-user-select:text

 （六）-webkit-touch-callout     （mobile移动设备私有属性）

       当触摸并按住触摸目标时，禁止或显示系统默认菜单。

       -webkit-touch-callout: default | none;

• default – 显示默认的callout
• none– 禁用callout

   属性理解：

       在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

案例：
  1）禁止长按弹出的菜单 
     eg：微信浏览器 若有js点击事件，长按会弹出一个js提示的菜单栏，有打开和取消俩个选项。
     ① iOS取消以上默认事件，设置  父元素-webkit-touch-callout:none; 属性来禁止这个菜单的弹出
     ② 安卓取消以上默认事件，使用h5提出的 contextmenu事件 阻止默认行为     （安卓不支持该css3属性）
          $(document).bind('contextmenu',function(e){
                  e.preventDefault();    
           })

（1111）webkit内核的浏览器常见8种有：

①Google Chrome (谷歌浏览器 )

②Safari （苹果浏览器）

③搜狗高速浏览器

④遨游浏览器3

⑤QQ浏览器

⑥360极速浏览器

⑦世界之窗浏览器(极速版)

⑧阿里云浏览器

附加一个浏览器引擎整理的随笔