vendor-prefix

Why can't I combine ::selection and ::-moz-selection in one CSS rule? [duplicate]

由 会有一股神秘感。 提交于 2019-12-07 14:12:10
问题 This question already has answers here : Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set? (2 answers) Closed 6 years ago . I'm a big fan of using ::selection and ::-moz-selection to spruce up a website a bit - I hate the default blue and white colours! However, I find one little thing that really bugs me: I can't put ::selection and ::-moz-selection in the same CSS rule, like this: ::selection, ::-moz-selection { background:#8A1920; color:#FFFF; }

What compatibility do I lose when dropping the -khtml- vendor prefix?

由 久未见 提交于 2019-12-06 19:55:07
问题 I have bits and pieces of CSS that use the -webkit- vendor prefix. For compatibility with "older" versions of Safari, I have the same rule with the -khtml- vendor prefix. I am actively uninterested in compatibility with Konqueror and other true KHTML browsers. For example, I may have the following rules: .menuItem { -khtml-user-select: none; -webkit-user-select: none; } I understand that modern WebKit browsers internally rewrite all -khtml- and -apple- rules to be -webkit- rules instead.

Is it possible to use a mixin for browser-specific CSS

由 喜欢而已 提交于 2019-12-06 10:13:20
问题 I'm looking for a solution to use a mixin for browser-specific CSS hacks. I'm using JavaScript to add the browser tag in the HTML class. Like .ie .ie7 .ie8 .ie9 I would like to use the mixin like: .box-test { margin: 10px; @include browser(ie7) { margin: 20px; } } DESIRED OUTPUT: .box-test { margin: 10px; } .ie7 .box-test { margin: 20px; } the mixin i tried to make: @mixin browser($browserVar) { @if $browserVar == ie7 { .ie7 { @content } } @else if $browserVar == ie8 { .ie8 { @content; } }

Why can't I combine ::selection and ::-moz-selection in one CSS rule? [duplicate]

由 落花浮王杯 提交于 2019-12-06 01:17:27
This question already has an answer here: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set? 2 answers I'm a big fan of using ::selection and ::-moz-selection to spruce up a website a bit - I hate the default blue and white colours! However, I find one little thing that really bugs me: I can't put ::selection and ::-moz-selection in the same CSS rule, like this: ::selection, ::-moz-selection { background:#8A1920; color:#FFFF; } jsFiddle link I find this quite annoying, because it means that if I want to change my background colour (or some other

Why is rotateY (flip) css3 animation flickering in Chrome?

由 纵饮孤独 提交于 2019-12-06 01:02:29
问题 I have made a jsFiddle: http://jsfiddle.net/Grezzo/JR2Lu/ When you hit the i key on your keyboard, the picture flips around to show some text, but during the flip animation it flickers (particularly the text flickers) when viewed in Chrome. (note that I am using -prefix-free JS library so that I don't have to prefix with browser specific CSS properties.) Why is it flickering and how can I stop it? UPDATE: Flicker is noticable on Chrome 20.0.1132.47 m running on XP, and whatever the latest

WebKit and its legacy prefixes

由 允我心安 提交于 2019-12-05 16:14:43
I am trying to compile the properties prefixed by -apple- and -khtml- which are/were supported by WebKit and since which version they were eventually dropped or introduced. What are the limitations imposed on them? For example can you find them in document.body.style ? I guess only someone in the know like the reporter of this bug could provide us an accurate list. But I prefer asking here first this way everyone will benefit from it… A good place to start your investigation is this revision . Introduction The problem is not quite as simple as you might think. It is easy enough to compare

IOS Safari transition transform not working

由 混江龙づ霸主 提交于 2019-12-05 05:19:35
Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use transition: transform; for any translate property applied. I'm using the correct prefixes and checked support and should be working no problem. http://caniuse.com/#search=transition http://caniuse.com/#search=translate JSFiddle $('button').on('click', function() { $('.mydiv').toggleClass('added-class'

-webkit-transform not working in Internet Explorer

由 时间秒杀一切 提交于 2019-12-04 23:46:58
问题 I've found that -webkit-transform: rotateZ(10deg); doesn't work in Internet Explorer 9. What can be used instead of that using CSS3? 回答1: Have you tried -ms-transform:rotateZ(10deg); ? As -webkit is also a vendor specific prefix, you'll have to add those for non-webkit browsers, too. (like -ms , -moz , -o ) Check out this CSS3 3D Transforms Tutorial for more info: http://www.pageresource.com/css3/3d-transforms-tutorial/ 回答2: 3D transforms don't work in IE9. IE10 does support them, though.

Is it possible to use a mixin for browser-specific CSS

由 别说谁变了你拦得住时间么 提交于 2019-12-04 16:59:02
I'm looking for a solution to use a mixin for browser-specific CSS hacks. I'm using JavaScript to add the browser tag in the HTML class. Like .ie .ie7 .ie8 .ie9 I would like to use the mixin like: .box-test { margin: 10px; @include browser(ie7) { margin: 20px; } } DESIRED OUTPUT: .box-test { margin: 10px; } .ie7 .box-test { margin: 20px; } the mixin i tried to make: @mixin browser($browserVar) { @if $browserVar == ie7 { .ie7 { @content } } @else if $browserVar == ie8 { .ie8 { @content; } } @else if $browserVar == ie9 { .ie9 { @content; } } } the problem is the output is: .box-test { margin:

Why is rotateY (flip) css3 animation flickering in Chrome?

由 北战南征 提交于 2019-12-04 06:05:00
I have made a jsFiddle: http://jsfiddle.net/Grezzo/JR2Lu/ When you hit the i key on your keyboard, the picture flips around to show some text, but during the flip animation it flickers (particularly the text flickers) when viewed in Chrome. (note that I am using -prefix-free JS library so that I don't have to prefix with browser specific CSS properties.) Why is it flickering and how can I stop it? UPDATE: Flicker is noticable on Chrome 20.0.1132.47 m running on XP, and whatever the latest version for OS X 10.7.4 Lion is (I'm not near my Mac right now to check) Well, this is a little weird. By
订阅 vendor-prefix