I was playing around right-clicking my line numbers in Dreamweaver, trying to bookmark a line.
I noticed this menu entry:
What is the Caio Hack? With alert('hi'); highlighted, this is the result:
It's an old CSS hack.
"Caio Hack is a simple CSS comments-based hack used in 'inline' and
'external' CSS declarations to hide information from Netscape 4"
For example, this code hides the .foo2 selector to Netscape 4:
.foo1
{
color: green;
background-color: yellow;
}
/*/*/
.foo2
{
color: red;<code></code>
}
/* */
.foo3
{
color: blue;
}
Source: http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Hacks_and_Filters/Caio_Hack
The Caio Hack is named after its discoverer, Caio Chassot.
It is a CSS hack for hiding rules from Netscape 4, exploiting a bug in NN4's parser.
By opening a comment using /*/*/, all subsequent CSS would be ignored by NN, because it thinks the comment didn't close.
To end the block, you'd use /* */.
For example:
.foo1
{
color: green;
background-color: yellow;
}
/*/*/
.foo2
{
color: red;
}
/* */
.foo3
{
color: blue;
}
More info at:
Wikibooks
CSS Discuss
http://css-discuss.incutio.com/wiki/Caio_Hack
It hides CSS codes from Netscape4 and sometimes Opera.
Related
I am trying to set the color (font-color) attribute for the placholder pseudo class for a multiple classes of inputs.
(So I want all inputs with class .red-va or .blue-va to have placeholder text of a given color)
I can (and have) done this:
.red-va::-webkit-input-placeholder {
color: white;
}
.red-va:-moz-placeholder { /* Firefox 18- */
color: white;
}
.red-va::-moz-placeholder { /* Firefox 19+ */
color: white;
}
.red-va:-ms-input-placeholder {
color: white;
}
.blue-va::-webkit-input-placeholder {
color: white;
}
.blue-va:-moz-placeholder { /* Firefox 18- */
color: white;
}
.blue-va::-moz-placeholder { /* Firefox 19+ */
color: white;
}
.blue-va:-ms-input-placeholder {
color: white;
}
Basically two sets of CSS for each input class, with browser support requiring four different approaches for each.
Is there a more elegant / streamlined way of doing this?
Unfortunately, without making use of a preprocessor (since this is CSS), the best you can do is to group each set of vendor prefixes for both .red-va and .blue-va, but not all of them into a single ruleset:
.red-va::-webkit-input-placeholder, .blue-va::-webkit-input-placeholder {
color: white;
}
.red-va:-moz-placeholder, .blue-va:-moz-placeholder { /* Firefox 18- */
color: white;
}
.red-va::-moz-placeholder, .blue-va::-moz-placeholder { /* Firefox 19+ */
color: white;
}
.red-va:-ms-input-placeholder, .blue-va:-ms-input-placeholder {
color: white;
}
Or if you can afford to change the markup you can go further by adding a common class to both .red-va and .blue-va so you don't have to duplicate your selectors for both — effectively halving the CSS that you currently have.
The reason you can't group them all into one ruleset is covered here. In short, it's because browsers are required to drop an entire ruleset if they don't recognize any part of the selector list, which will be caused by the vendor prefixes (and in the case of Firefox, also by the fact that versions older than 19 don't recognize the pseudo-element syntax).
Thankfully, prefixed pseudos will soon be a thing of the past.
I'm newbie at sass and I've a lot of lines like this:
-webkit-border-top-right-radius: $topright;
-moz-border-radius-topright: $topright;
and
&::-webkit-input-placeholder {#content}
&:-moz-placeholder {#content}
I don't know what are those names that start with a "-" and I want to know what "&:" and "&::" mean.
Thanks
None of those are sass code.
The -webkit and -moz prefixes are vendor specific styles. Those are non-standard styles that apply to the Webkit and Mozilla engines, used by Safari and Firefox.
There are no &: and &:: selectors, the & is just the regualar sass parent selector and the : and :: is part of the :-moz-placeholder pseudo-class and the ::-webkit-input-placeholder pseudo element.
-webkit-border-top-right-radius: $topright;
-moz-border-radius-topright: $topright;
here - $topright is a variable with some css value like $topright : 10px;
then converted to css
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
&::-webkit-input-placeholder {#content}
&:-moz-placeholder {#content}
:: is a is a pseudo-selector with inner element like anchor
a{
&::after{
}
}
will become
a:after{
}
-moz-border-radius-topright is simply a vendor specific property for Mozilla browsers, to support properties before they were in the actual standard (and the standard was published). There are several more vendor prefixes such asmoz, webkit, o (opera)
& in sass (also in less) means "the selector of the parent scope" (: and :: just denote pseudo-selectors, nothing sass-specific here, that's normal css). For instance:
a {
color:blue;
&:hover {
color:red;
}
}
Gets translated into
a { color:blue; }
a:hover { color:red; }
& is a parent's selector.
For example:
div {
background: red;
&.blue {
background: blue !important;
}
&:hover {
background: transparent;
}
}
It is compiled to:
div {
background: red;
}
div.blue {
background: blue !important;
}
div:hover {
background: transparent;
}
You can see the documentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
The : or :: is a pseudo-element. In this case to set the style for the placeholder attribute.
See examples here: http://blog.teamtreehouse.com/the-css3-placeholder-pseudo-element
- is a vendor prefix like #xbonez has said in his comment.
The '-' is actually part of CSS. They are used to indicate vendor prefixes which are used for new CSS features that are not yet part of the formal CSS specification. More info - http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
The '&' character is used in SASS to refer to the parent selector. More info - http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
The following SASS code:
div {
color: red;
&:hover {
color: green;
}
}
Will compile to the following CSS:
div {
color: red;
}
div:hover {
color: green;
}
The ':' and '::' characters are used to select pseudo-elements - see http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#Pseudo-elements
Two questions:
I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. JSFiddle demo
Another question is how do I change placeholder color not globally. That is, I have multiple fields, I want only one field to have white placeholder, all the others remain in default color.
html:
<form id="search-form" class="navbar-form navbar-left" role="search">
<div class="">
<div class="right-inner-addon"> <i class="icon-search search-submit"></i>
<input type="search" class="form-control" placeholder="search" />
</div>
</div>
</form>
css:
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
background-color:#303030;
font-size: 13px;
color:white;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 12px;
/* pointer-events: none; */
cursor: pointer;
color:white;
}
/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18
:-moz-placeholder { color: white; }
FF 19+
::-moz-placeholder { color: white; }
IE 10+
:-ms-input-placeholder { color: white; }
Assign the placeholder to a class selector like this:
.form-control::-webkit-input-placeholder { color: white; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge */
It will work then since a stronger selector was probably overriding your global. I'm on a tablet so i cant inspect and confirm which stronger selector it was :) But it does work I tried it in your fiddle.
This also answers your second question. By assigning it to a class or id and giving an input only that class you can control what inputs to style.
There was an issue posted here about this: https://github.com/twbs/bootstrap/issues/14107
The issue was solved by this commit: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5
The solution therefore is to override it back to #999 and not white as suggested (and also overriding all bootstraps styles, not just for webkit-styles):
.form-control::-moz-placeholder {
color: #999;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
A Possible Gotcha
Recommended Sanity Check - Make sure to add the form-control class to your inputs.
If you have bootstrap css loaded on your page, but your inputs don't have the
class="form-control" then placeholder CSS selector won't apply to them.
Example markup from the docs:
I know this didn't apply to the OP's markup but as I missed this at first and spent a little bit of effort trying to debug it, I'm posting this answer to help others.
I'm using Bootstrap 4 and Dennis Puzak's solution does not work for me.
The next solution works for me
.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; } /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge*/
Bootstrap has 3 lines of CSS, within your bootstrap.css generated file that control the placeholder text color:
.form-control::-moz-placeholder {
color: #999999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999999;
}
.form-control::-webkit-input-placeholder {
color: #999999;
}
Now if you add this to your own CSS file it won't override bootstrap's because it is less specific. So assmuning your form inside a then add that to your CSS:
form .form-control::-moz-placeholder {
color: #fff;
opacity: 1;
}
form .form-control:-ms-input-placeholder {
color: #fff;
}
form .form-control::-webkit-input-placeholder {
color: #fff;
}
Voila that will override bootstrap's CSS.
The others did not work in my case (Bootstrap 4). Here is the solution I used.
html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }
If we use a stronger selector (html first), we don't need to use the hacky value !important.
This overrides bootstraps CSS as we use a higher level of specificity to target .form-control elements (html first instead of .form-control first).
I think qwertzman is on the right track for the best solution to this.
If you only wanted to style a specific placeholder, then his answer still holds true.
But if you want to override the colour of all placeholders, (which is more probable) and if you are already compiling your own custom Bootstrap LESS, the answer is even simpler!
Override this LESS variable:
#input-color-placeholder
Boostrap Placeholder Mixin:
#mixin placeholder($color: $input-color-placeholder) {
// Firefox
&::-moz-placeholder {
color: $color;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
}
now call it:
#include placeholder($white);
You should check out this answer : Change an HTML5 input's placeholder color with CSS
Work on most browser, the solution in this thread is not working on FF 30+ for example
With LESS the actual mixin is in vendor-prefixes.less
.placeholder(#color: #input-color-placeholder) {
...
}
This mixin is called in forms.less on line 133:
.placeholder();
Your solution in LESS is:
.placeholder(#fff);
Imho the best way to go. Just use Winless or a composer compiler like Gulp/Grunt works, too and even better/faster.
This question already has answers here:
How can I define colors as variables in CSS?
(19 answers)
Closed 6 years ago.
Is there a way to set global variables in css such as:
#Color1 = #fff;
#Color2 = #b00;
h1 {
color:#Color1;
background:#Color2;
}
Latest Update: 16/01/2020
CSS Custom Properties (Variables) have arrived!
It's 2020 and time to officially roll out this feature in your new applications.
Preprocessor "NOT" required!
There is a lot of repetition in CSS. A single color may be used in several places.
For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally.
For non-trivial projects, this is not always possible. By declaring a variable on the :root pseudo-element, a CSS author can halt some instances of repetition by using the variable.
How it works
Set your variable at the top of your stylesheet:
CSS
Create a root class:
:root {
}
Create variables (-- [String] : [value])
:root {
--red: #b00;
--blue: #00b;
--fullwidth: 100%;
}
Set your variables anywhere in your CSS document:
h1 {
color: var(--red);
}
#MyText {
color: var(--blue);
width: var(--fullwidth);
}
BROWSER SUPPORT / COMPATIBILITY
See caniuse.com for current compatability.
Firefox: Version 31+ (Enabled by default)
Supported since 2014 (Leading the way as usual.)
More info from Mozilla
Chrome: Version 49+ (Enabled by default).
Supported since 2016
Safari/IOS Safari: Version 9.1/9.3 (Enabled by default).
Supported since 2016
Opera: Version 39+ (Enabled by default).
Supported since 2016
Android: Version 52+ (Enabled by default).
Supported since 2016
Edge: Version 15+ (Enabled by default).
Supported since 2017
CSS Custom Properties landed in Windows Insider Preview build 14986
IE: When pigs fly.
It's time to finally let this ship sink. No one enjoyed riding her anyway. ☺
W3C SPEC
Full specification for upcoming CSS variables
Read more
TRY IT OUT
A fiddle and snippet are attached below for testing:
(It will only work with supported browsers.)
DEMO FIDDLE
:root {
--red: #b00;
--blue: #4679bd;
--grey: #ddd;
--W200: 200px;
--Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
float: var(--Lft);
width: var(--W200);
height: var(--W200);
margin: 10px;
padding: 10px;
border: 1px solid var(--red);
}
.Bx1 {
color: var(--red);
background: var(--grey);
}
.Bx2 {
color: var(--grey);
background: black;
}
.Bx3 {
color: var(--grey);
background: var(--blue);
}
.Bx4 {
color: var(--grey);
background: var(--red);
}
<p>If you see four square boxes then variables are working as expected.</p>
<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>
You can't create variables in CSS right now. If you want this sort of functionality you will need to use a CSS preprocessor like SASS or LESS. Here are your styles as they would appear in SASS:
$Color1:#fff;
$Color2:#b00;
$Color3:#050;
h1 {
color:$Color1;
background:$Color2;
}
They also allow you to do other (awesome) things like nesting selectors:
#some-id {
color:red;
&:hover {
cursor:pointer;
}
}
This would compile to:
#some-id { color:red; }
#some-id:hover { cursor:pointer; }
Check out the official SASS tutorial for setup instructions and more on syntax/features. Personally I use a Visual Studio extension called Web Workbench by Mindscape for easy developing, there are a lot of plugins for other IDEs as well.
Update
As of July/August 2014, Firefox has implemented the draft spec for CSS variables, here is the syntax:
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
It's not possible using CSS, but using a CSS preprocessor like less or SASS.
Try SASS http://sass-lang.com/ or LESS http://lesscss.org/
I love SASS and use it for all my projects.
I do it this way:
The html:
<head>
<style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>
The xCss.php:
<? // place here your vars
$fntBtn = 'bold 14px Arial'
$colBorder = '#556677' ;
$colBG0 = '#dddddd' ;
$colBG1 = '#44dddd' ;
$colBtn = '#aadddd' ;
// here goes your css after the php-close tag:
?>
button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }
You will either need LESS or SASS for the same..
But here is another alternative which I believe will work out in CSS3..
http://css3.bradshawenterprises.com/blog/css-variables/
Example :
:root {
-webkit-var-beautifulColor: rgba(255,40,100, 0.8);
-moz-var-beautifulColor: rgba(255,40,100, 0.8);
-ms-var-beautifulColor: rgba(255,40,100, 0.8);
-o-var-beautifulColor: rgba(255,40,100, 0.8);
var-beautifulColor: rgba(255,40,100, 0.8);
}
.example1 h1 {
color: -webkit-var(beautifulColor);
color: -moz-var(beautifulColor);
color: -ms-var(beautifulColor);
color: -o-var(beautifulColor);
color: var(beautifulColor);
}
I tried to do the following, but it does not work:
* {
&::selection { text-decoration: underline; }
}
That's the way I do it:
// define it
#mixin selection {
::-moz-selection { #content; }
::selection { #content; }
}
// use it
#include selection {
color: white;
background: black;
}
Update
I recommend to just use ::selection {} with autoprefixer instead of a mixin. This will make your code thinner and your brain lighter :)
In this case, autoprefixer will transform this:
::selection {
color: white;
background: black;
}
...(depending on your target browsers/configuration) into something like that:
::-moz-selection {
color: white;
background: black;
}
::selection {
color: white;
background: black;
}
Mixins work with pseudo element selectors ;) see my mixin:
$prefixes: ("-moz-", "");
#mixin selection($color, $background) {
#each $prefix in $prefixes {
::#{$prefix}selection {
color: $color;
background: $background;
}
}
}
how to use:
#include selection(white, black);
of course you can make it far more flexible, but it was sufficient for me ;)
While the ::selection pseudo-element was still in the draft spec, text-decoration was not stated as one of the allowed style properties. Given that browsers implement it anyway, they should be following the rules according to that document, disallowing text-decoration as such.
That said, there's nothing wrong with your selector, although it's worth noting that Firefox uses the vendor-prefixed version ::-moz-selection instead. You'd have to repeat the rule to support that browser, along with Chrome, Safari and Opera (see this answer for info).
So in SCSS, you'd do this:
* {
&::-moz-selection { /* Style any selection */ }
&::selection { /* Style any selection */ }
}
You might be able to reduce that using mixins, but I'm not sure if mixins work with pseudo-element selectors.
Great mixin, I have changed to work inside a rule by adding "&", it works better for me. I have also added a empty prefix to get the rule with no prefix.
#mixin selection($color, $background) {
$prefixes: ("-moz-", "-webkit-", "-o-", "-ms-", "");
#each $prefix in $prefixes {
&::#{$prefix}selection {
color: $color;
background: $background;
}
}
}
With compass you could do it like the following:
#import "compass/css3/selection";
#include selection($highlightBackground, $highlightColor)