The -ms-accelerator property sets or retrieves a string that indicates whether the object represents a keyboard shortcut.
-ms-accelerator: false | true
Ondreas
Ondreas
/ css-ios-pwa-viewport.css
Created
December 7, 2020 18:57
— forked from cvan/css-ios-pwa-viewport.css
CSS for env(safe-area-inset-top) for iOS "Add to Homescreen" / PWA; standalone styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @supports (padding-top: constant(safe-area-inset-top)) { | |
| body { | |
| padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); | |
| } | |
| } | |
| @media (display-mode: fullscreen) { | |
| body { | |
| padding: 0; | |
| } |
Ondreas
/ prefixed-properties.md
Created
October 31, 2020 15:16
— forked from p3t3r67x0/prefixed-properties.md
Be aware that every rendering engine has its own implementation of prefixed properties. As extensions are made part of the standard, the unprefixed identifier is then substituted.
Ondreas
/ prefixed-office-properties.md
Created
October 31, 2020 15:15
— forked from p3t3r67x0/prefixed-office-properties.md
MS Office prefixed style properties can be used for older versions of MS Excel, MS PowerPoint or MS Word when you want to save a document, presentation, workbook, or worksheet as a web document, or even in older versions for MS Outlook.
Ondreas
/ pseudo_elements.md
Created
October 31, 2020 11:17
— forked from p3t3r67x0/pseudo_elements.md
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
Ondreas
/ svg-fallback-with-image-tag.md
Last active
May 2, 2020 15:50
[SVG fallback with <image>] #svg #fallback #html #css
A few days ago Lea Verou shared a link to Jake Archibald's post Having fun with where he once again found out that image and img are nearly the same, all browsers replace image with img while parsing HTML.
A couple of months ago this property of image tag gave me the idea to use it for graceful degradation of SVG images in browsers which do not support SVG. The idea is extremely simple, we will have a SVG image for modern browsers and regular raster image for others. And write the following code:
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>
Ondreas
/ form-reset.scss
Last active
May 1, 2020 14:19
— forked from nathansmith/1_form-reset.scss
[Comprehensive Form Reset] #sass #reset #css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // `Default font for form elements. | |
| //---------------------------------------------------------------------------------------------------- | |
| $form-font-stack: Arial, "Liberation Sans", FreeSans, sans-serif !default; | |
| $form-font-size: 13px !default; | |
| // `Form Element Reset. | |
| //---------------------------------------------------------------------------------------------------- | |
| input::ms-clear, |
Ondreas
/ Overlay Horizontal Menu (CSS only | No-JS)
Last active
July 18, 2019 14:56
Burger Menu - Full CSS / No JS
Ondreas
/ env_variables.md
Created
May 15, 2019 15:10
What the hell is env variables and how to add to path
Check out this Super User explanation of environment variables
We sometimes need to add folders containing programs to the PATH-variable to make them executable from the command line.
Ondreas
/ _tooltip.scss
Last active
May 1, 2020 14:25
[Arrow-Tooltip Sass @mixin] #sass #mixin #arrow #css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Fork of the original Gist: https://gist.github.com/fitzhaile/3830038 by Fitz Haile | |
| // | |
| // Add outward pointing arrows (triangles) to the sides of a box that has borders. (CSS triangles obviously | |
| // based on Chris Coyier's CSS triangle. http://css-tricks.com/snippets/css/css-triangle.) | |
| // | |
| // Parameters: | |
| // | |
| // * `direction` -- What side of the box and direction of the arrow | |
| // * `flatten` -- An *even numbered* factor of flattening the triangle (MUST be a even number) | |
| // * `arrowBaseLength` -- Width or height of the arrow's base |
Ondreas
/ _invisible-content.scss
Created
July 20, 2017 08:13
Invisible content technique | Sass + @mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // =========================================================================== | |
| // INVISIBLE CONTENT technique | |
| // =========================================================================== | |
| // 1) Hide visually and from screen readers | |
| // http://bit.ly/hide-for-all | |
| // 2) Hide only visually, but have it available for screen readers | |
| // http://bit.ly/hide-only-visually-but-keep-accessible | |
| // 3) For long content, line feeds are not interpreted as spaces and small | |
| // width causes content to wrap 1 word per line. |
NewerOlder