首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

双破折号webkit前缀-- chrome中的webkit,单个不工作

双破折号webkit前缀--在Chrome中的webkit是用于标识Webkit内核的浏览器引擎。Webkit是一种开源的浏览器引擎,最初由苹果公司开发,后来被Google采用并集成到Chrome浏览器中。

在前端开发中,webkit前缀用于指定特定的CSS属性或属性值适用于Webkit内核的浏览器,如Chrome和Safari。由于不同浏览器对CSS属性的支持程度不同,使用webkit前缀可以确保在Webkit内核的浏览器中正确显示样式。

然而,双破折号webkit前缀--在Chrome中的webkit指的是一种已经过时的写法,不再被推荐使用。现代的Chrome浏览器已经不再需要使用双破折号webkit前缀--来指定Webkit内核的样式。

相反,推荐使用单破折号webkit前缀-来指定Webkit内核的样式。例如,要为某个元素设置圆角边框,可以使用以下CSS代码:

代码语言:css
复制
.element {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

在上述代码中,-webkit-border-radius用于Webkit内核的浏览器(如Chrome和Safari),而border-radius用于其他浏览器(如Firefox和Edge)。

总结起来,双破折号webkit前缀--在Chrome中的webkit是过时的写法,现代的Chrome浏览器已经不再需要使用双破折号webkit前缀--来指定Webkit内核的样式。相反,应该使用单破折号webkit前缀-来指定Webkit内核的样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

-webkit-border-radius和-moz-border-radius

w3标准是border-radius, -webkit-border-radius 是为了兼容 chrome 或 safari, -moz-border-radius 是为了兼容火狐, 而现在火狐支持标准...不同浏览器内核对网页编写语法解释也不同,因此同一网页在不同内核浏览器里渲染效果也不同,这也是网页编写者需要在不同内核浏览器测试网页显示效果原因。...内核分类: Trident : IE内核 Gecko:Firefox内核,Netscape内核 Presto:Oprea前内核(现已废弃,改用Blink内核) Webkit:Safari内核,Chrome...内核原型 Blink:Chrome(28及以后版本)/Opera(15及以后版本) 一些国内浏览器他们内核 搜狗浏览器:兼容模式(IE:Trident)和高速模式(webkit) 傲游浏览器:兼容模式...:IE内核 不同内核浏览器需在CSS3添加私有前缀 由于存在多种内核,所以在编写页面的CSS3代码,部分需要添加前缀属性要对应添加私有前缀,也将其称之为浏览器私有前缀: Trident内核:

67820
  • css笔记 - transition学习笔记(二)

    是否延迟执行过渡 否 填写时默认为0 transition-property需要交代给你那些事 指定这个属性值改变时,就会有动画效果,所以你想看谁 (属性) 动画(不是笑话哦),这个值就填谁...又好像animate帧一样,时间开头怎么样动,时间结尾怎么样动,不过他还是时间大范围内凭感觉控制,没有animation帧动画强大,只要你愿意,可以把animation当作flash工作台来用哦...js写法: object.style.transitionDelay="2s" --------- 懒人写法 ---------- 单个属性 简写写法: transition: propertyName...浏览器兼容性 IE10+,Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari、Chrome<25 需要前缀 -webkit-。...属性分开写时,添加兼容性前缀方法同上,不再赘述。

    1.1K30

    【CSS3】浏览器私有前缀 ( WebKit 内核前缀 -webkit- | Gecko 内核前缀 -moz- | Trident 内核前缀 -ms- | Presto 内核前缀 -o- )

    CSS 属性 或 规则 尚未成为W3C标准一部分 , 这些前缀有助于确保新属性在老版本浏览器兼容性 ; 常见浏览器私有前缀 : -webkit- : WebKit 内核 浏览器 私有前缀..., 如 : Chrome 和 Safari 浏览器 ; -moz- : Gecko 内核 浏览器 私有前缀 , 如 : Firefox 浏览器 ; -ms- : Trident 内核 浏览器..." 浏览器私有前缀 + CSS属性 " , 如 : 为 border-radius CSS 属性 设置 WebKit 内核 浏览器 私有前缀 , 设置 -webkit-border-radius...如 : Chrome 和 Safari 浏览器 */ -webkit-border-radius: 10px; /* Gecko 内核 浏览器 ...在编写 CSS 样式代码时 , 建议将带有前缀属性放在前面 , 以确保在老版本浏览器兼容性 , 将不带前缀版本放在最后一行 , 以符合标准 ; 例如 : 对于 border-radius 属性

    25410

    css transition ease,css3 transition属性「建议收藏」

    可能之前决心,毅力,耐心不够,所以想要重整起来,放下浮躁心态,一步一个脚印,踏踏实实来学习。 首先学习是css3 transition属性,该属性定义为从一个属性值平滑过渡到另一个属性值。...,针对各浏览器写css3样式都要加上前缀,如: -webkit-: /*chrome,safari*/ -moz-: /*firebox*/ -ms: /*IE*/ -o-: /*opera*/ 如下...:mymove 5s infinite; /*Safari and Chrome*/ } @-webkit-keyframes mymove{ 0% {margin-left: 0px;background-color...50% {margin-left: 30px;} 100% {margin-left: 60px;} } ease linear ease-in ease-out ease-in-out 在节奏紧张都市生活...HUAWEI MateBook配备12英寸屏幕 金属机身,重量仅为640g,厚度低至6.9mm。内在强大,彰显锐意与品质交融; 轻薄时尚,是您工作生活称心伴侣。

    65220

    WebFont 三宗罪之二:吹毛求疵WebFont 渲染差异

    当然,本文不会再过多做搬运工工作,接下来叙述方式让我从三个问题角度入手,自问自答,图文并茂,阐述一下我观点。 1、同一平台同一浏览器对于 WebFont 渲染与本地字体渲染有不同吗?...经过博览众文+几个截图,我武断地回答“基本没有不同”,看下面的截图,本地系统已经安装思源黑体,然后在该网页通过开发者工具分别定义网络字体与本地字体思源黑体(截图环境为Mac OSX 10.0 + Chrome...-webkit-text-stroke 属性 复合属性。设置或检索对象文字描边宽度和颜色。...-webkit-text-stroke-color:设置或检索对象文字描边颜色。默认值为字体颜色。...-moz-osx-font-smoothing 属性 这个属性就有点奇葩了,还有osx 这个前缀,因为只支持Mac OS 系统。

    1K50

    Google Chrome Frame 谷歌浏览器框架

    微软这回要哭了,Google最新发布Chrome Frame可以将IE Trident内核替换成WebKit,是IE一下子有了两内核(浏览器也核了,厚厚~)。...Google在帮助其竞争对手改善其产品,微软IE开发团队是不是会很尴尬?在运行插件之后,用户IE浏览器将获得Chrome性能和功能,拥有更快JS解析速度和对HTML5网页标准支持。...Google Chrome Frame 装好后怎么使用WebKit内核来工作Chrome Frame用法是什么?用户只要在地址前加 cf: 即可使用 WebKit 核心浏览 页面。...如cf:http://www.biaodianfu.com/,注意网址必修同时受用cf:和http://。...如果你是网站管理员,想让访问者直接使用Webkit内核,只需给你网页head加一个meta标签: <meta http-equiv=”X-UA-Compatible” content=”chrome

    95120

    keyframes优先级-webkit-

    css3有动画属性这个2012年时候就有了。 但是那时候浏览器版本不统一,很多时候写css3需要加前缀才可以....-moz-,-webkit-, keyframes 需要加这些前缀才可 不过随着手机移动发展,在中国程序员偏向于chrome和firefox两大阵营。...加前缀是小气象征,为了不被诟病,各大浏览器开始妥协。其实也是一种规则遵守而已! 大家都遵守这样即可,约定俗成东西。 今天我徒弟问了一个问题,在我以往项目经验不曾遇到过。 我把代码贴出来 <!...:change; -webkit-animation-duration:5s; -webkit-animation-timing-function...safari下可以执行动画效果,可惜在chrome下不执行,使我马上想到了优先级!!!

    39730

    如何用JavaScript捕获CSS3动画事件

    来看下这个简单CSS3动画: #anim.enable { -webkit-animation: flash 1s ease 3; -moz-animation: flash 1s ease...浏览器兼容性 在撰写本文时,Firefox,Chrome,Safari,Opera和IE10支持CSS3动画和相关联事件处理程序。...此外,Opera,IE10和webkit浏览器使用前缀,并在一些情况下做出很棒支持......oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationendMSAnimationEnd 等事件 前缀最简单方法是使用自定义函数为所有前缀和非前缀名称调用...事件对象作为单个参数传递。除了标准属性和方法外,还提供: animationName:CSS3动画名称(即flash) elapsedTime:动画开始后以秒为单位时间。

    2.1K20

    移动端爬坑记 --- (1)布局与样式上奇葩偶遇

    前言 汇总下自己搞移动端遇到掉进去坑,以及脱坑方案; Flex兼容 Flex想要兼容众多花样式手机,要注意以下这么些 前缀要考虑2009~2012年语法[webkit-box,flex,flex-box...*/ } 这些前缀很少手动去写,一般都用构建工具处理,我用是gulp+autoprefixer来处理,这里我处理范围 var AUTOPREFIXER_BROWSERS = [ 'ie >=...'android >= 2.3', 'bb >= 10' ]; 值一提是,添加前缀并不是万能,有些国内手机就不吃这一套了,今天小伙伴就遇到了;华为一款手机不支持常规flex写法。。。...有些android不带这个很奇葩【错乱】,且不要使用margin:0 auto【作用于子元素】 在滚动包裹层添加这么一条私有前缀样式即可享受类似APP滑动效果,不仅丝滑,还带弹性!...机型输入框可能会出现如图怪异多余浮出表单,经过观察与测试发现只有input:password类型输入框存在,那么我们只要使用input:text类型输入框并通过样式-webkit-text-security

    11610

    4种方案解决CSS浏览器兼容性问题

    ,对同一段CSS解析效果也不一致,这就导致了页面显示效果统一,也就带来了兼容性问题。...浏览器私有属性 我们经常会在某个CSS属性前添加一些前缀,比如-webkit-,-moz- ,-ms-,这些就是浏览器私有属性。 为什么会出现私有属性呢?...但是为避免日后W3C公布标准时有所变更,会加入一个私有前缀,比如-webkit-border-radius,通过这种方式来提前支持新属性。...常用前缀有: -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性 -o代表opera私有属性 对于私有属性顺序要注意,把标准写法放到最后...连接线(划线)(-)亦可使用,为了避免与某些带划线属性混淆,所以使用下划线()更为合适。 :选择IE7及以下。

    2.7K10

    WinForm嵌入Web网页解决方案

    (早期版本) 世界之窗浏览器(最初为IE内核,2013年采用Chrome+IE内核) UC浏览器(Webkit内核+Trident内核) 其他等   其中部分浏览器新版本是“核”甚至是“多核”,其中一个内核是...Webkit(Safari内核,Chrome内核原型,开源)  WebKit内核常见浏览器:Chrome、傲游浏览器3、Apple Safari (Win/Mac/iPhone/iPad)、Symbian...这一渲染引擎是开源引擎WebKitWebCore组件一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。...浏览器内核检测 ie.icoa.cn https://ie.icoa.cn 可检测 PC 或手机浏览器内核和操作系统类型,包括Google ChromeWebKit、IETrident、MEEdge...使用 WebView2,可以在本机应用不同部分嵌入 Web 代码,或在单个 WebView 实例中生成所有本机应用。

    4.5K11

    【转】不同内核浏览器差异以及浏览器渲染简介

    有的是由于网站本身编写规范,有的是由于浏览器本身渲染标准。    ...3、Trident/WebKit核浏览器     现在国内最主流核”浏览器基本都是这个架构,360极速浏览器、世界之窗浏览器极速版、傲游3搜狗浏览器3、QQ浏览器、枫树浏览器、快快浏览器、百度浏览器...其它核浏览器都是基于Chromium,而傲游是基于WebKit,但是偏偏又用是V8引擎。...五、几个小点 1、Chrome/Chromium     很多人都会说自己用核浏览器是Chrome/IE,或者说是基于Chrome。...苦逼前端攻城师们为了兼容各个浏览器而不断地去测试和调试,还在脑子记下各种遇到BUG及解决方案,而我们好像并没有去主动地关注和了解下浏览器工作原理。

    2.1K10

    常用不易记忆css自定义代码

    1、占位符 在 标签设置 placeholder 属性时,有时候因为需求,要修改占位符默认颜色或者字体大小,这是就可以用下面的css: // firefox input::-...input::-webkit-input-placeholder { color: red; font-size: 18px; } 需要注意是不同浏览器写法不同: 都要加上各自浏览器前缀(...如 -webkit- ); firefox placeholder 前面没有 input- ; firefox与chrome都是 :: 两个冒号,而IE则是一个 : ; 低版本浏览器与新版本浏览器可能写法不同...去掉小三角css: -webkit-appearance: none; -moz-appearance: none; 在IE浏览器目前还没找到可以去掉小三角方法。...去掉spinnerscss如下: // firefox input[type='number'] { -moz-appearance:textfield; } // chrome input[type

    69820

    HTML5点击全屏方法

    否则,俺们脆弱小心脏根本承受起啊——屏幕立马黑了个通透——还以为盖茨发现我系统是盗版黑了我屏呢!!! ? 好吧,玩完两把三国杀,情绪稳定了,回到正题。...注意:FireFox和Chrome写法上有不同,Webkit内核浏览器需要增加个is, 如document.webkitIsFullScreen; 而Firefox则是document.mozFullScreen...:full-screen{}用在CSS代码,可以控制全屏元素(及其子元素)全屏状态时样式。同样,不同浏览器不同前缀。...如:-moz-full-screen{}或:- webkit-full-screen{}。更新于2019-05-05现在该伪类已经变成:fullscreen,没有短横线,也无需私有前缀。...现在目光转移到下面,呼吸一些新鲜空气~~ 三、FireFox/Chrome显示差异 表象差异: 表象差异就是是否支持全屏提示差异了,FireFox浏览器以前是个大框框,现在UI和则简约

    4.7K30
    领券