Css prefix

-prefix-freeBreak free from CSS prefix hell!Project homepageA script that lets you use only unprefixed CSS properties everywhere.It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.API DocumentationNote: To use -prefix-free you don't need to write any JS code, just to include prefixfree.js in your page. The following is meant mostly for plugin authors.-prefix-free creates 2 global variables: StyleFix and PrefixFree. StyleFix is a framework for building various CSS fixers and -prefix-free depends on it. Currently, StyleFix is bundled with -prefix-free and only available this way, but it might eventually get split to a separate project, with separate documentation.StyleFix API DocumentationPropertiesAn array of the current callbacks.FunctionsStyleFix.register(callback)Adds callback to the queue of functions that will be called when fixing CSS code. callback will be called with the following parameters:css (String): The CSS code that is being processed,raw (Boolean): Whether the CSS code can contain rules etc or it's just a bunch of declarations (such as the ones found in the style attribute),element (HTMLElement): The node that the CSS code came from (such as a element, a element or any element with a style attribute)and it should return the fixed CSS code.StyleFix.link(linkElement)Processes a element and converts it to a element with fixed code. Relative URLs will be converted.StyleFix.styleElement(styleElement)Fixes code inside a element.StyleFix.styleAttribute(element)Fixes code inside the style attribute of an element. Will not work in IE and Firefox getAttribute('style'): In IE invalid values of valid properties will be dropped, and in Firefox StyleFix.camelCase(str)StyleFix.deCamelCase(str)Utility methods that convert a string to camelCase and back.-prefix-free API DocumentationPropertiesThe detected prefix of the current browser (like '-moz-' or '-webkit-')The detected prefix of the current browser in camelCase format (like 'Moz' or 'Webkit')PrefixFree.propertiesPrefixFree.functionsPrefixFree.keywordsPrefixFree.selectorsPrefixFree.atrulesProperties/functions/keywords/etc that are only available with a prefix in the current browser.FunctionsPrefixFree.prefixCSS(code [, raw])Prefixes the properties and values in the code passed with the prefix of the current browser, only when needed. If the second parameter is truthy, it also prefixes selectors and @-rules. This is the most useful method in -prefix-free.PrefixFree.prefixSelector(selector)PrefixFree.prefixProperty(property)Prefixes the passed selector or property. The property is prefixed even when it's supported prefix-less. These are more internal methods and I assume they won't be too useful in general.

FireStylus Firebug plugin -l, --line-numbers Emits comments in the generated CSS indicating the corresponding Stylus line -m, --sourcemap Generates a sourcemap in sourcemaps v3 format --sourcemap-inline Inlines sourcemap with full source text in base64 format --sourcemap-root url> "sourceRoot" property of the generated sourcemap --sourcemap-base path> Base path> from which sourcemap and all sources are relative -P, --prefix [prefix] Prefix all css classes -p, --print Print out the compiled CSS --import file> Import stylus file> --include-css Include regular CSS on @import -D, --deps Display dependencies of the compiled file --disable-cache Disable caching --hoist-atrules Move @import and @charset to the top -r, --resolve-url Resolve relative urls inside imports --resolve-url-nocheck Like --resolve-url but without file existence check -V, --version Display the version of Stylus -h, --help Display help informationSTDIO Compilation Example stylus reads from stdin and outputs to stdout, so for example:$ stylus --compress some.styl > some.css$ stylus --compress some.styl > some.cssTry Stylus some in the terminal! Type below and press CTRL-D for __EOF__:$ stylusbody color red font 14px Arial, sans-serif$ stylusbody color red font 14px Arial, sans-serifCompiling Files Example stylus also accepts files and directories. For example, a directory named css will compile and output .css files in the same directory.$ stylus css$ stylus cssThe following will output to ./public/stylesheets:$ stylus css --out public/stylesheets$ stylus css --out public/stylesheetsOr a few files:$ stylus one.styl two.styl$ stylus one.styl two.stylFor development purposes, you can use the linenos option to emit comments indicating the Stylus filename and line number in the generated CSS:$ stylus --line-numbers path>$ stylus --line-numbers path>Or the firebug option if you want to use the FireStylus extension for Firebug:$ stylus --firebug path>$ stylus --firebug path>Prefixing classes stylus executable provides you a way to prefix all the generated styles using --prefix option with given [prefix],$ stylus --prefix foo-$ stylus --prefix foo-used with this code:.bar width: 10px.bar width: 10pxwould yield.foo-bar { width: 10px;}.foo-bar { width: 10px;}All the classes would be prefixed: interpolated, extended etc.Converting CSS If you wish to convert CSS to the terse Stylus syntax, use the --css flag.Via stdio:$ stylus --css test.css > test.styl$ stylus --css test.css > test.stylOutput a .styl file of the same basename:$ stylus --css test.css$ stylus --css test.cssOutput to a specific destination:$ stylus --css test.css /tmp/out.styl$ stylus --css test.css /tmp/out.stylCSS Property Help On OS X, stylus help will open your default browser and display help documentation for the given .$ stylus help box-shadow$ stylus help box-shadowInteractive Shell The Stylus REPL (Read-Eval-Print-Loop) or "interactive shell" allows you to play around with Stylus expressions directly from your terminal.Note that this works only for expressions—not selectors, etc. To use simple add the -i, or --interactive flag:$ stylus -i> color = white=> #fff> color - rgb(200,50,0)=> #37cdff> color=> #fff> color -= rgb(200,50,0)=> #37cdff>

That contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won’t be able to focus or activate these interactive elements.const popover = new bootstrap.Popover('.example-popover', { container: '.modal-body'})Custom popovers Added in v5.2.0You can customize the appearance of popovers using CSS variables. We set a custom class with data-bs-custom-class="custom-popover" to scope our custom appearance and use it to override some of the local CSS variables..custom-popover { --bs-popover-max-width: 200px; --bs-popover-border-color: var(--bd-violet-bg); --bs-popover-header-bg: var(--bd-violet-bg); --bs-popover-header-color: var(--bs-white); --bs-popover-body-padding-x: 1rem; --bs-popover-body-padding-y: .5rem;}button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="custom-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables."> Custom popoverbutton>Dismiss on next click Use the focus trigger to dismiss popovers on the user’s next click of an element other than the toggle element.Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior. You can only use elements, not s, and you must include a tabindex.a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popovera>const popover = new bootstrap.Popover('.popover-dismiss', { trigger: 'focus'})Disabled elements Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper or , ideally made keyboard-focusable using tabindex="0".For disabled popover triggers, you may also prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover"> button class="btn btn-primary" type="button" disabled>Disabled buttonbutton>span>CSS Variables Added in v5.2.0As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on .popover for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.--#{$prefix}popover-zindex: #{$zindex-popover};--#{$prefix}popover-max-width: #{$popover-max-width};@include rfs($popover-font-size, --#{$prefix}popover-font-size);--#{$prefix}popover-bg: #{$popover-bg};--#{$prefix}popover-border-width: #{$popover-border-width};--#{$prefix}popover-border-color: #{$popover-border-color};--#{$prefix}popover-border-radius: #{$popover-border-radius};--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};--#{$prefix}popover-box-shadow: #{$popover-box-shadow};--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);--#{$prefix}popover-header-color: #{$popover-header-color};--#{$prefix}popover-header-bg: #{$popover-header-bg};--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};--#{$prefix}popover-body-color: #{$popover-body-color};--#{$prefix}popover-arrow-width: #{$popover-arrow-width};--#{$prefix}popover-arrow-height: #{$popover-arrow-height};--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);Sass variables $popover-font-size: $font-size-sm;$popover-bg: var(--#{$prefix}body-bg);$popover-max-width: 276px;$popover-border-width: var(--#{$prefix}border-width);$popover-border-color: var(--#{$prefix}border-color-translucent);$popover-border-radius: var(--#{$prefix}border-radius-lg);$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list$popover-box-shadow: var(--#{$prefix}box-shadow);$popover-header-font-size: $font-size-base;$popover-header-bg: var(--#{$prefix}secondary-bg);$popover-header-color: $headings-color;$popover-header-padding-y: .5rem;$popover-header-padding-x: $spacer;$popover-body-color: var(--#{$prefix}body-color);$popover-body-padding-y: $spacer;$popover-body-padding-x: $spacer;$popover-arrow-width: 1rem;$popover-arrow-height: .5rem;Usage Enable popovers via JavaScript:const exampleEl = document.getElementById('example')const popover = new bootstrap.Popover(exampleEl, options)Keep popovers accessible to keyboard and assistive technology users by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding tabindex="0", this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers in this situation. Additionally, do not rely solely on hover as the trigger for your popovers as this will make them impossible to trigger for keyboard users.Avoid

Css-html-js-minify StandAlone Async single-file cross-platform no-dependencies Unicode-ready Python3-ready Minifier for the Web.css-html-js-minify.py --helpusage: css-html-js-minify.py [-h] [--version] [--wrap] [--prefix PREFIX][--timestamp] [--quiet] [--obfuscate][--checkupdates] [--tests] [--hash] [--gzip][--comments] [--overwrite] [--after AFTER][--before BEFORE] [--watch]fullpathCSS-HTML-JS-Minify. StandAlone Async single-file cross-platform no-dependencies Unicode-ready Python3-ready Minifier for the Web.positional arguments: fullpath Full path to local file or folder.optional arguments: -h, --help show this help message and exit --version show programs version number and exit --wrap Wrap Output to ~80 chars per line, CSS Only. --prefix PREFIX Prefix string to prepend on output filenames. --timestamp Add a Time Stamp on all CSS/JS output files. --quiet Quiet, Silent, force disable all Logging. --obfuscate Obfuscate Javascript. JS Only. (Recommended). --checkupdates Check for Updates from Internet while running. --tests Run all built-in Unit Tests, report and exit. --hash Add SHA1 HEX-Digest 11chars Hash to Filenames. --gzip GZIP Minified files as '*.gz', CSS/JS Only. --comments Keep Comments, CSS/HTML Only (Not Recommended) --overwrite Force overwrite all in-place (Not Recommended) --after AFTER Command to execute after run (Experimental). --before BEFORE Command to execute before run (Experimental). --watch Re-Compress if file changes (Experimental).CSS-HTML-JS-Minify: Takes a file or folder full path string and process allCSS/HTML/JS found. If argument is not file/folder will fail. Check Updatesworks on Python3. StdIn to StdOut is deprecated since may fail with unicodecharacters. SHA1 HEX-Digest 11 Chars Hash on Filenames is used for ServerCache. CSS Properties are AlphaSorted,to help spot cloned ones,Selectors not.Watch works for whole Folders, with minimum of ~60 Secs between runs.Takes a full path to anything, a file or a folder, then parse, optimize and compress for Production.If full path is a folder with multiple files it will use Async Multiprocessing.Pretty-Printed colored Logging to Standard Output and Log File on OS Temporary Folder.No Dependencies at all, just needs Python Standard Built-in Libs.Set its own Process name and show up on Process lists.Can check for updates for itself.Full Unicode/UTF-8 support.Smooth CPU usage.Can Obfuscate, GZIP and Hash files, also Watch for changes on files.Can execute arbitrary commands after and before running.*.css files are saved as *.min.css, *.js are saved as *.min.js, *.htm are saved as *.htmlScreenshots:Linux:Apple Mac Os X: (Provided by Loggerhead) MS Windows:Usage:css-html-js-minify.py file.htmcss-html-js-minify.py file.csscss-html-js-minify.py file.jscss-html-js-minify.py /project/static/Install permanently on the system:PIP: (Recommended!)sudo pip3 install css-html-js-minifyPIP from Git:sudo pip3 install git+ wget -O /usr/bin/css-html-js-minify chmod +x /usr/bin/css-html-js-minifycss-html-js-minifyMANUALLY:Save this file and run it with Python.Why?:Why another Compressor ?, theres lots of Compressor for Web files outthere!; Or maybe not ?.Lots work inside DJango/Flask only, or Frameworks of PHP/Java/Ruby, or can Not process whole folders.This project is the big brother of another project that does the inverse, a Beautifier for the Web.Input CSS:/*! * preserve commment *//* delete comment */.class, #NotHex, input[type="text"], a:hover { font-family : Helvetica Neue, Arial, Helvetica, 'Liberation Sans', sans-serif; border: none;

Use this page to configure formatting options for CSS files. When you change these settings, the Preview pane shows how this will affect your code.Tabs and IndentsBlank LinesUse this tab to define where and how many blank lines you want PhpStorm to retain and insert in your code after reformatting. The results are displayed in the Preview pane.OtherIn this tab, specify the alignment, braces, spaces, and quotes options to be applied on reformatting.ArrangementIn this tab, enable sorting of CSS properties, which is by default turned off, and select the sorting order.To enable sorting, select the Sort CSS properties checkbox.Select By name to have all CSS properties within each block reordered alphabetically. PhpStorm ignores vendor-specific prefixes but keeps multiple vendor-specific prefixes for a certain CSS property alpha-sorted.border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: black; To define your own sorting strategy, select the Custom order option and specify the desired sorting order in the field next to it.Use commas and spaces as delimiters and skip vendor-specific properties because PhpStorm always groups them with the corresponding one without a prefix. Within such group, properties are sorted by vendor prefix and the prefix-free one comes last.Regular Expressions are welcome in the Custom Order list, for example, .* matches any property.PhpStorm remembers the modified Custom Order list and restores it if you turn custom sorting off and then turn it on again.To sort all CSS properties in a fileIn the main menu, go to .Alternatively, go to in the main menu, and then select Whole file and Rearrange code in the dialog that opens.To sort CSS properties within a blockSelect the block to sort and then select from the main menu.Alternatively, go to in the main menu, and then select Rearrange code in the dialog that opens.Set from The link appears in the upper-right corner of the page, when applicable. Click this link and choose the language to be used as the base for the current language code style.To return to the initial set of code style settings and discard the changes, click Reset.Last modified: 08 October 2024