常用浏览器私有属性小记

taohonghui 发布于2019-08-01 15:00 / 2626人阅读

摘要：在上，当你触摸并按住触摸的目标，比如一个链接，浏览器将显示链接有关的系统默认菜单。主要用在和标签上。特别适合弹窗的背景层应用，显示的更加之有层次感的一些更新禁止缩放，不再支持需要监听来实现禁止缩放相关链接去除侧边的叉叉

把日常工作中使用率较高的记录下来，如果想看更全的可以看这个伪元素表单控件默认样式重置与自定义大全

general 去除 select 表单右侧箭头

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
  }

/*for IE10*/
select::-ms-expand {
    display: none;
}

禁用选择文本

这个就是光标由输入改为普通箭头

* {
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

/* 一种实践，避免了非输入类的user-select */
*:not(input):not(textarea) {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

更改选中默认颜色

::-webkit-selection {
    background: #d3d3d3; 
    color: #555;
}
::-moz-selection {
    background: #d3d3d3; 
    color: #555;
}
::selection {
    background: #d3d3d3; 
    color: #555;
}

https://jsfiddle.net/lyplba/9...

更改输入框文字placeholder颜色

::-webkit-input-placeholder {
    color: purple;
}

::-moz-input-placeholder {
    color: purple;
}

::-ms-input-placeholder {
    color: purple;
}

::input-placeholder {
    color: purple;
}

https://jsfiddle.net/lyplba/y...

-webkit-

想更多了解webkit的私有属性的，可以来这里，是由携程UED收集维护的~

假滑动效果

http://3g.163.com/touch/news/...

刚好看到这样一个提问，才发现-webkit-下有这样的应用，直接把scrollbal隐藏掉，这样就形成了伪滑动效果了，之前我的做法是外面再包一层overflow以防看到滚动条，不过这个的话是-webkit-下的呢~

::-webkit-scrollbar {
    display: none;
}

自定义input

当应用此样式时，input都会失去浏览器默认表现，可以自行定义

input { -webkit-appearance: none; }

Mac OS下的button

Mac OS下的button会优先使用默认的尺寸，即使你设置了，也是无效的，因此需要重置下

button { -webkit-appearance: button; } /* none亦可 */

清除input[type="number"]侧边的箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

去除点击链接或者JavaScript可点元素时的高亮效果

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* 考虑到兼容问题，所以写两个上去，针对Android的 */
}

iOS 禁止或显示系统默认菜单

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

主要用在img和a标签上。

img, a {
    -webkit-touch-callout: none;
}

-webkit-overflow-scrolling

这个没想好怎么解释，直接看范例

背景虚化

详细介绍，请查看大漠博客

此属性目前是在iOS 9 以及 Mac Safari下可见该效果，可以作为一种渐进增强的效果，提升体验之用，效果很不错，相较于-webkit-filter以及我们传统的增加mask或者overlay黑色背景层这种方式有很大的提升。
特别适合弹窗的背景层应用，显示的更加之有层次感！

.backdrop {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}

iOS10的一些更新 禁止缩放，meta不再支持

需要监听touchmove来实现禁止缩放

document.addEventListener("touchmove", function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

相关链接：Disable viewport zooming iOS 10 safari?

-moz- -ms- 去除侧边的叉叉

::-ms-clear { display: none; }
::-ms-reveal { display: none; }

GPU云服务器云服务器私有属性访问私有属性 php类私有属性 java私有属性成员

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49704.html

常用浏览器私有属性小记

摘要：在上，当你触摸并按住触摸的目标，比如一个链接，浏览器将显示链接有关的系统默认菜单。主要用在和标签上。特别适合弹窗的背景层应用，显示的更加之有层次感的一些更新禁止缩放，不再支持需要监听来实现禁止缩放相关链接去除侧边的叉叉把日常工作中使用率较高的记录下来，如果想看更全的可以看这个伪元素表单控件默认样式重置与自定义大全 general 去除 select 表单右侧箭头 select { ...

李涛 2019-08-28 18:28 评论0 收藏0
web开发小记1：谷歌字体

摘要：标签今天开发的时候，遇到一个问题，就是在谷歌浏览器上发现使用设置字体的大小时候，在字体小于的时候，不起作用。标签： web 今天开发的时候，遇到一个问题，就是在谷歌浏览器上发现使用font-size设置字体的大小时候，在字体小于12px的时候，不起作用。具体解决方案如下：在一些老版本的谷歌浏览器中：可以用Chrome的私有属性禁用浏览器文字大小调整的功能 -webkit-text-...

dkzwm 2019-08-29 11:06 评论0 收藏0
JDK1.8 ArrayList部分源码分析小记

摘要：部分源码分析小记底层数据结构底层的数据结构就是数组，数组元素类型为类型，即可以存放所有类型数据。初始容量大于初始化元素数组新建一个数组初始容量为为空对象数组初始容量小于，抛出异常无参构造函数。 JDK1.8 ArrayList部分源码分析小记底层数据结构底层的数据结构就是数组，数组元素类型为Object类型，即可以存放所有类型数据。我们对ArrayList类的实例的所有的操作底层都...

王军 2019-08-15 11:56 评论0 收藏0
小记--获取url键值

摘要：以后会不定期把项目中用到的也是我们平时开发常用的一些方法贴出来，也是一个自我总结的过程获取键值是我们在项目会经常遇到的需求。以后会不定期把项目中用到的也是我们平时开发常用的一些方法贴出来，也是一个自我总结的过程获取url键值是我们在项目会经常遇到的需求。下面是我在项目中封装的方法，详细的说明在代码都有注释。 /** * 获取url键值 * url => [href] | [pa...

galaxy_robot 2019-08-21 17:58 评论0 收藏0
JavaScript & jQuery 常用方法小记

摘要：函数节流用途如调整浏览器大小，或者用户输入信息，导致反复提交接口调用方法判断手机端访问获取地址栏参数返回顶部当滚动条的位置处于距顶部像素以下时，跳转链接出现，否则消失当点击跳转链接后，回到页面顶部位置正则检测手机号邮箱 1.JavaScript 函数节流用途：如调整浏览器大小，或者用户输入信息，导致反复提交接口 function throttle(method,context) { ...

codeGoogle 2019-08-21 10:31 评论0 收藏0