【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极速浏览器

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

⑧阿里云浏览器

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

 

posted @ 2017-09-06 12:10  蓿苜  阅读(394)  评论(0编辑  收藏  举报