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

双破折号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内核:

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

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

    35910

    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。内在强大,彰显锐意与品质的交融; 轻薄时尚,是您工作生活的称心伴侣。

    74420

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

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

    1.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标签: chrome

    99120

    如何用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

    keyframes优先级-webkit-

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

    40530

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

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

    2.9K10

    移动端爬坑记 --- (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

    12810

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

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

    2.2K10

    CSS3 filter(滤镜)

    应用场景 filter属性可以应用于所有元素,在SVG中,它适用于除元素外的容器元素和所有图形元素。此属性不是继承属性,其计算值为指定值,动画类型为滤镜函数列表。...浏览器兼容性 大多数现代浏览器都支持filter属性,包括Chrome、Firefox、Safari以及它们的移动版本。在使用时,您可能需要考虑添加供应商前缀以确保跨浏览器兼容性。...通过使用filter属性,开发人员可以在不需要图像编辑软件的情况下直接在CSS中创建丰富的视觉效果,从而提高网页设计的灵活性和创造力。...如果滤镜列表长度不同,较长列表中缺少的等效滤镜函数将以其初始值被添加到较短列表的尾部,然后所有滤镜函数根据其指定的规则插值。...,创建更复杂的视觉效果 img { -webkit-filter: contrast(150%) brightness(75%) grayscale(50%); /* Chrome, Safari

    11610

    WinForm嵌入Web网页的解决方案

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

    4.7K11

    常用的不易记忆的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浏览器中目前还没找到可以去掉小三角的方法。...去掉spinners的css如下: // firefox input[type='number'] { -moz-appearance:textfield; } // chrome input[type

    70420

    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
    领券