mattdesl/dom-css

fast dom CSS styling

dom-css

Small module for fast and reliable DOM styling.

• normalizes for camel and dash case (see to-camel-case)
• detects vendor prefixes as necessary, cached for performance (see prefix-style)
• converts numbers to px strings for common properties (see add-px-to-style)

var css = require('dom-css')

//set a style
css(element, 'position', 'absolute')

//will be set as "WebkitFontSmoothing" on Chrome
css(element, 'font-smoothing', 'none')

//set multiple styles
css(element, {
  // can be camel or dash case
  'background-color': 'blue',

  // you can use numbers to auto-"px"
  left: 25, 
  top: 0,
  marginTop: 0,
  position: 'absolute',
  
  // certain props will not have "px" added
  opacity: 0.5
})

//get the current style
css.get(element, 'position') 
// -> 'absolute'

css.get(element, ['left', 'marginTop']) 
// -> { left: '25px', marginTop: '0px' }

Note: The get() method does not compute an element's style, it only fetches the currently set inline style.

Usage

css(element, property, value)

css.set(element, property, value)

Styles an element with the css property (dash or camel case) and a given value. value is a string, or a number to be suffixed with 'px' (special cases, see below).

css(element, styles)

css.set(element, styles)

A shorthand for setting multiple styles, where styles is an object containing property:value pairs.

css.get(element, prop)

Gets the inline style of element, where prop is a string (like "borderRadius") or an array of strings. If an array of strings is given, an object is returned with key-value pairs representing the specified properties.

css.get(div, ['width', 'height'])
//=> { width: '20px', height: '40px' }

This does not provide the computed style, only the current inline style.

auto px

If a number is specified, the value will have "px" added to it, unless it is a special unitless property like 'opacity' and 'zIndex'. See the full list in add-px-to-style (sourced from React).

Changelog

• 2.x
  • formatted to standard code style
  • updates to latest prefix-style, since 'Khtml' prefix has long been obsolete
  • now all properties are suffixed with "px" except a few like opacity, zIndex, etc. The list is sourced from React and maintained in another module.
• 1.x - initial version which had a list of properties to be suffixed with "px"

License

Special thanks to Paul Irish's gist for the prefix detection (now part of Modernizr).

MIT, see LICENSE.md for details.

dom-css's Issues

setting css variables

Hi @mattdesl!

Setting element style as el.style[property] = value is not valid for css variables, so css(el, {'--active': 'red'}); does not work for now.
We have to use el.style.setProperty(property, value); in order to enable custom css properties.
I guess that would be nice of dom-css to care about that.
Is it worth PR or that is out of package scope?

-webkit-clip-path

not auto-prefixing this style

css string support

Hi @mattdesl!
I’ve noticed that sometimes it is useful to pass css string directly instead of css object:

css(el, `
font-size: 12px;
font-family: ${fontFamily};
...
`);

Because it alows for avoiding css-in-js notation, which is copy-paste compatible and in other ways handy.

Is there any sense to add css.set(element, string) clause?

multiple elements support (nodeList)

hi matt,
i was wondering, is there a possibility to support the nodeList as the params' element?

i.e:

css(document.querySelectorAll('.el'), 'width', '200px')

otherwise i guess i'll just do a simple forEach but it'd be great to be able to pass a nodeList or array directly. let me know what you think!

blacklist or whitelist for px?

TweenLite uses a whitelist to only suffix certain properties [1]

jQuery uses a blacklist to suffix all properties except specific ones [2]

Which approach is best for a module like this? hmm

Dependencies with exact versions

Would you mind a PR that makes the dependencies have exact versions?
It's safer to depend on exact versions, although not 100% bullet-proof.

V2

• use vendor prefixes where available to fix #6 ok, this is actually a chrome bug
• use blacklist to fix #2 and #1
• support @ rule for prefixing @keyframes nah, better as another module

new 'px' features

ideally i'd like to roll these out in a single version bump. feel free to add others if you feel things are missing

• minWidth / maxWidth / etc
• borderRadius
• borderWidth