Using variables in property names in LESS (dynamic properties / property name interpolation)

Update: LESS >= 1.6 As of version 1.6 (see changelog) property name interpolation is implemented in LESS. So you don’t need any magic anymore. (For older versions, see my original answer.) Your mixin would work basically as is: LESS: .vendor(@property; @value){ -webkit-@{property}: @value; -moz-@{property}: @value; -ms-@{property}: @value; -o-@{property}: @value; @{property}: @value; } /*example*/ .test { … Read more

Does .css() automatically add vendor prefixes?

As @zeroflagL wrote it appears that since jQuery 1.8.0 .css() does add browser specific prefixes (see this). In earlier versions this is not done automatically by jQuery’s .css(). You will have to do it by yourself or you can use jQuery’s .cssHooks() to add vendor prefixes. Code example from here: (function($) { if ( !$.cssHooks … Read more

text field not working in safari

Your problem lies in calcstyle.css here: * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } I’m not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me. EDIT Here is a possible solution: Select everything but your inputs… *:not(input.field) { … Read more

Ordering of vendor-specific CSS declarations

The best practise is undisputedly to have the unprefixed property last: .foo { -moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Webkit */ border-radius: 10px; /* W3C */ } Whichever is last out of -webkit-border-radius and border-radius will be the one that’s used. -webkit-border-radius is the “experimental” property – the implementation may contain deviations from … Read more

List of CSS vendor prefixes?

These are the ones I’m aware of: -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o-, -xv- Opera Software -atsc- Advanced Television Standards Committee -wap- The WAP Forum -webkit- Safari, Chrome (and other WebKit-based browsers) -khtml-, -konq- Konqueror browser -apple- Webkit supports properties using the -apple- prefixes as well prince- YesLogic -ah- Antenna … Read more

How do I apply vendor prefixes to inline styles in reactjs?

React does not apply vendor prefixes automatically. In order to add vendor prefixes, name the vendor prefix as per the following pattern, and add it as a separate prop: -vendor-specific-prop: ‘value’ becomes: VendorSpecificProp: ‘value’ So, in the example in the question, it needs to become: <div style={{ transform: ‘rotate(90deg)’, WebkitTransform: ‘rotate(90deg)’ }}>Hello World</div> Value prefixes … Read more

Why do browsers create vendor prefixes for CSS properties?

It’s because the features were implemented by vendors before the specification reached its final release stage. The vendor prefixes ensure that there are no clashes with changing functionality etc. Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations. Let’s say a W3C working group is discussing a … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)