I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility. Scroll Bar CSS Support Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (10 Oct 2014): Some browsers (IE, Konqueror) … Read more
button { background: none!important; border: none; padding: 0!important; /*optional*/ font-family: arial, sans-serif; /*input has OS specific font-family*/ color: #069; text-decoration: underline; cursor: pointer; } <button> your button that looks like a link</button>
For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements). For browsers/devices supporting CSS2 only, you can use the [disabled] selector. As with the image, don’t put an image in the button. Use CSS background-image with background-position and background-repeat. That … Read more
To align one flex child to the right set it withmargin-left: auto; From the flex spec: One use of auto margins in the main axis is to separate flex items into distinct “groups”. The following example shows how to use this to reproduce a common UI pattern – a single bar of actions with some … Read more
Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order. Positioning the pseudo-element (absolute) and assigning a z-index value other than “auto” creates the new stacking context. #element { position: relative; /* optional */ width: … Read more
You can encode Rule 110 in CSS3, so it’s Turing-complete so long as you consider an appropriate accompanying HTML file and user interactions to be part of the “execution” of CSS. A pretty good implementation is available, and another implementation is included here: body { -webkit-animation: bugfix infinite 1s; margin: 0.5em 1em; } @-webkit-keyframes bugfix … Read more
Note: This solution changes based on viewport size and not the amount of content I just found out that this is possible using VW units. They’re the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus … Read more
You can do superscript with vertical-align: super, (plus an accompanying font-size reduction). However, be sure to read the other answers here, particularly those by paulmurray and cletus, for useful information.
Why don’t you just save/serve the CSS file as UTF-8? nav a:hover:after { content: “↓”; } If that’s not good enough, and you want to keep it all-ASCII: nav a:hover:after { content: “\2193”; } The general format for a Unicode character inside a string is \000000 to \FFFFFF – a backslash followed by six hexadecimal … Read more
Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it’s not useful. The image has a display:none style but its size may be read by the script. Chrome v68.0 does not load images if the parent is hidden. You may check it there : … Read more