This solution is written in PHP, but it should be easily adapted to other languages.
The original .htaccess
regex can cause problems with files like json-1.3.js
. The solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)
First, we use the following rewrite rule in .htaccess:
RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]
Now, we write the following PHP function:
/**
* Given a file, i.e. /css/base.css, replaces it with a string containing the
* file's mtime, i.e. /css/base.1221534296.css.
*
* @param $file The file to be loaded. Must be an absolute path (i.e.
* starting with slash).
*/
function auto_version($file)
{
if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
return $file;
$mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}
Now, wherever you include your CSS, change it from this:
<link rel="stylesheet" href="/css/base.css" type="text/css" />
To this:
<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />
This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.
This can also work with images, favicons, and JavaScript. Basically anything that is not dynamically generated.
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder
. [Ref]
- Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder
(one colon). [Ref]
- Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder
, but the old selector will still work for a while. [Ref]
- Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder
. [Ref]
- April 2017: Most modern browsers support the simple pseudo-element
::placeholder
[Ref]
Internet Explorer 9 and lower does not support the placeholder
attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding
on an input
will not get the same background color as the pseudo-element.
CSS selectors
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
Usage notes
- Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use
opacity: 1
here.
- Note that placeholder text is just cut off if it doesn’t fit – size your input elements in
em
and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
- Browsers with HTML support for
placeholder
but without CSS support for that (like Opera) should be tested too.
- Some browsers use additional default CSS for some
input
types (email
, search
). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance
and -moz-appearance
to change that. Example:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
Best Answer
You can do this with CSS filters in all modern browsers (see the caniuse compatibility table).
Here's more reading from CSS Tricks about the various filters you can use: https://css-tricks.com/almanac/properties/f/filter/