Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fixed #59: CSS module: fill vendor properties

  • Loading branch information...
commit f9cd008ec3a56e67b74602a5df9d77fa0522abab 1 parent 5f02784
@sergeche sergeche authored
Showing with 57 additions and 4 deletions.
  1. +45 −0 cssFeatures.html
  2. +12 −4 javascript/resolvers/css.js
View
45 cssFeatures.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>Find all vendor-prefixed CSS properties</title>
+</head>
+<body>
+ <h2>All properties</h2>
+ <div id="all-props"></div>
+
+ <script type="text/javascript">
+ (function() {
+ var style = window.getComputedStyle(document.body, null);
+ var prefixedProperties = [];
+ var re = /^\-[a-z]+\-/, p;
+
+ if (style.length) {
+ for (var i = 0, il = style.length; i < il; i++) {
+ p = style.item(i);
+ if (re.test(p)) {
+ prefixedProperties.push(p.replace(re, ''));
+ }
+ }
+ } else {
+ // fucking Opera...
+ re = /^[A-Z][a-z]*/;
+ for (p in style) {
+ if (re.test(p)) {
+ prefixedProperties.push(
+ p
+ .replace(re, '')
+ .replace(/([a-z])([A-Z])/g, function(str, p1, p2) {
+ return p1 + '-' + p2.toLowerCase();
+ })
+ .toLowerCase()
+ );
+ }
+ }
+ }
+
+ document.getElementById('all-props').innerHTML = prefixedProperties.join(', ');
+ })();
+ </script>
+</body>
+</html>
View
16 javascript/resolvers/css.js
@@ -100,10 +100,18 @@ zen_coding.define('cssResolver', function(require, _) {
+ 'abbreviations. Empty list means that all possible CSS values may '
+ 'have <code><%= vendor %></code> prefix.');
- prefs.define('css.webkitProperties', '', descTemplate({vendor: 'webkit'}));
- prefs.define('css.mozProperties', '', descTemplate({vendor: 'moz'}));
- prefs.define('css.msProperties', '', descTemplate({vendor: 'ms'}));
- prefs.define('css.oProperties', '', descTemplate({vendor: 'o'}));
+ // properties list is created from cssFeatures.html file
+ var props = {
+ 'webkit': 'animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, appearance, backface-visibility, background-clip, background-composite, background-origin, background-size, border-fit, border-horizontal-spacing, border-image, border-vertical-spacing, box-align, box-direction, box-flex, box-flex-group, box-lines, box-ordinal-group, box-orient, box-pack, box-reflect, box-shadow, color-correction, column-break-after, column-break-before, column-break-inside, column-count, column-gap, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, dashboard-region, font-smoothing, highlight, hyphenate-character, hyphenate-limit-after, hyphenate-limit-before, hyphens, line-box-contain, line-break, line-clamp, locale, margin-before-collapse, margin-after-collapse, marquee-direction, marquee-increment, marquee-repetition, marquee-style, mask-attachment, mask-box-image, mask-box-image-outset, mask-box-image-repeat, mask-box-image-slice, mask-box-image-source, mask-box-image-width, mask-clip, mask-composite, mask-image, mask-origin, mask-position, mask-repeat, mask-size, nbsp-mode, perspective, perspective-origin, rtl-ordering, text-combine, text-decorations-in-effect, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-fill-color, text-orientation, text-security, text-stroke-color, text-stroke-width, transform, transform-origin, transform-style, transition-delay, transition-duration, transition-property, transition-timing-function, user-drag, user-modify, user-select, writing-mode, svg-shadow',
+ 'moz': 'animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, appearance, backface-visibility, background-inline-policy, binding, border-bottom-colors, border-image, border-left-colors, border-right-colors, border-top-colors, box-align, box-direction, box-flex, box-ordinal-group, box-orient, box-pack, box-sizing, column-count, column-gap, column-rule-color, column-rule-style, column-rule-width, column-width, float-edge, font-feature-settings, font-language-override, force-broken-image-icon, hyphens, image-region, orient, outline-radius-bottomleft, outline-radius-bottomright, outline-radius-topleft, outline-radius-topright, perspective, perspective-origin, stack-sizing, tab-size, text-blink, text-decoration-color, text-decoration-line, text-decoration-style, text-size-adjust, transform, transform-origin, transform-style, transition-delay, transition-duration, transition-property, transition-timing-function, user-focus, user-input, user-modify, user-select, window-shadow',
+ 'ms': 'accelerator, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, backface-visibility, background-position-x, background-position-y, behavior, block-progression, box-align, box-direction, box-flex, box-line-progression, box-lines, box-ordinal-group, box-orient, box-pack, content-zoom-boundary, content-zoom-boundary-max, content-zoom-boundary-min, content-zoom-chaining, content-zoom-snap, content-zoom-snap-points, content-zoom-snap-type, content-zooming, filter, flow-from, flow-into, font-feature-settings, grid-column, grid-column-align, grid-column-span, grid-columns, grid-layer, grid-row, grid-row-align, grid-row-span, grid-rows, high-contrast-adjust, hyphenate-limit-chars, hyphenate-limit-lines, hyphenate-limit-zone, hyphens, ime-mode, interpolation-mode, layout-flow, layout-grid, layout-grid-char, layout-grid-line, layout-grid-mode, layout-grid-type, line-break, overflow-style, overflow-x, overflow-y, perspective, perspective-origin, perspective-origin-x, perspective-origin-y, scroll-boundary, scroll-boundary-bottom, scroll-boundary-left, scroll-boundary-right, scroll-boundary-top, scroll-chaining, scroll-rails, scroll-snap-points-x, scroll-snap-points-y, scroll-snap-type, scroll-snap-x, scroll-snap-y, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color, text-align-last, text-autospace, text-justify, text-kashida-space, text-overflow, text-size-adjust, text-underline-position, touch-action, transform, transform-origin, transform-origin-x, transform-origin-y, transform-origin-z, transform-style, transition, transition-delay, transition-duration, transition-property, transition-timing-function, user-select, word-break, word-wrap, wrap-flow, wrap-margin, wrap-through, writing-mode, zoom',
+ 'o': 'dashboard-region, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, border-image, link, link-source, object-fit, object-position, tab-size, table-baseline, transform, transform-origin, transition, transition-delay, transition-duration, transition-property, transition-timing-function, accesskey, input-format, input-required, marquee-dir, marquee-loop, marquee-speed, marquee-style'
+ };
+
+ _.each(props, function(v, k) {
+ prefs.define('css.' + k + 'Properties', v, descTemplate({vendor: k}));
+ });
+
prefs.define('css.unitlessProperties', 'z-index, line-height',
'The list of properties whose values ​​must not contain units.');
Please sign in to comment.
Something went wrong with that request. Please try again.