What's default HTML/CSS link color? - html

I need its code representation, like #FFFFFF.

As of HTML5, the foreground colors of hyperlinks, among other things, are on track for standardization in the form of guidelines for expected default rendering behavior. In particular, taken from the section Phrasing content, the recommended default colors for unvisited and visited hyperlinks are the following:
:link { color: #0000EE; }
:visited { color: #551A8B; }
Notice that there is no recommended default for active hyperlinks (:link:active, :visited:active), however.
You can use these default colors and reasonably expect them to work. But keep in mind that a browser is free to ignore any or all of these guidelines, as it is never required to follow them. It is, however, recommended for a consistent user experience across browsers (which is how "expected" is defined in this context), so chances are that these colors will correspond to the defaults for most browsers. At worst, they still serve as reasonable approximations of the actual values.
In particular, the default unvisited and visited link colors in the latest versions of Firefox and Chrome are consistent with the above guidelines, but recent versions of IE report different values: unvisited links are rgb(0, 102, 204), or #0066CC, and visited links are rgb(128, 0, 128), or #800080. Older versions of Firefox (and possibly Safari/Chrome) had different defaults as well. Those are older versions, however; the main outlier today that I am aware of is IE. No word yet on whether this will change in Project Spartan — currently it still reflects the same values as the latest version of IE.
If you are looking for a standardized color scheme that is used by all browsers rather than suggested by HTML5, then there isn't one. Neither is there a way to revert to a browser's default value for a particular property on a particular element using pure CSS. You will have to either use the colors suggested by HTML5, or devise your own color scheme and use that instead. Either of these options will take precedence over a browser's defaults, regardless of browser.
If in doubt, you can always use the about:blank technique I described before to sniff out the default colors, as it remains applicable today. You can use this to sniff the active link color in all browsers, for example; in the latest version of Firefox (29 as of this update), it's rgb(238, 0, 0), or #EE0000.

standard link - #0000FF //blue
visited link - #800080 //purple
active link - #FF0000 //red
that was a standard but heavily differs per browser now. (since Nielsen gave it up ;)

The default colours in Gecko, assuming the user hasn't changed their preferences, are:
standard link: #0000EE (blue)
visited link: #551A8B (purple)
active link: #EE0000 (red)
Source
Gecko also provides names for the user's colours; they are -moz-hyperlinktext -moz-visitedhyperlinktext and -moz-activehyperlinktext and they also provide -moz-nativehyperlinktext which is the system link colour.

I am used to Chrome's color
so the blue color in Chrome for link is #007bff

According to the official default HTML stylesheet, there is no defined default link color. However, you can find out the default your browser uses by either taking a screenshot and using the pipette tool in any decent graphic editor or using the developer tools of your browser (select an a element, look for computed values>color).

For me, on Chrome (updated June 2018) the color for an unvisited link is #2779F6. You can always get this by zooming in really close, taking a screenshot, and visiting a website like html-color-codes.info that will convert a screenshot to a color code.

Visited - #660199
Unvisited - #1a0dab

Use the revert css keyword.
a {
color: revert;
}
For uBlock Origin htmlgiant.com##a:style(color:revert !important;)

Entirely depends on the website you are visiting, and in absence of an overwrite on the website, on the browser. There is no standard for that.

The best way to get a browser's default styling on something is to not style the element at all in the first place.

In CSS you can use the color string currentColor inside a link to eg make the border the same color as your default link color:
.example {
border: 1px solid currentColor;
}

Default html color code like this:
Red #FF0000 rgb(255, 0, 0)
Maroon #800000 rgb(128, 0, 0)
Yellow #FFFF00 rgb(255, 255, 0)
Olive #808000 rgb(128, 128, 0)
Blue #0000FF rgb(0, 0, 255)
Navy #000080 rgb(0, 0, 128)
Fuchsia #FF00FF rgb(255, 0, 255)
Purple #800080 rgb(128, 0, 128)

Related

Accessibility concerns in overriding the browser's native text-selector with CSS

In some designs for web projects, I've seen that the designer wants the browser's native text-selector to be customized following the Design System. For example, by changing the background and color of a text when it is selected. I'm not sure about the accessibility issues this can cause. My first take is that if the custom CSS matches the requirements of WCAG 1.4.3 Contrast (Minimum) it would be OK, as it happens with custom outlines for focus. However, I'm not sure about the secondary issues that this could cause to users with special contrast configurations in their system and browser.
1. Would overriding the browser's native text-selector with CSS be compliant with WCAG?
2. Can it cause other accessibility issues beyond what WCAG covers?
In my SASS code, it looks like this: (from this CSS trick)
body *::selection {
color: $white;
background: $primary-color-main; /* WebKit/Blink Browsers */
}
body *::-moz-selection {
color: $white;
background: $primary-color-main; /* Gecko Browsers */
}
A minimal reproducible example (without variables):
This code changes the text-selector for all elements that are recurrent descendants of the body in any HTML code.
body *::selection {
color: white;
background: black; /* WebKit/Blink Browsers */
}
body *::-moz-selection {
color: white;
background: black; /* Gecko Browsers */
}
Custom selection styles are compatible with WCAG criteria, as long as you fulfill the general requirements for color contrast and so on.
That said, custom selection styles could still be an accessibility issue. Users sometimes specify their own selection styles to fit their own needs. Additionally, users may be confused by changes to the expected appearance of selected text.
MDN has a little more info about selection accessibility.
Customizing the text selection color is perfectly fine as long as you follow 1.4.3 Contrast (Minimum), as you noted. I've seen custom selection colors done for branding purposes and it can look really good.
There aren't any other WCAG issues with having a custom selection style but one thing you might want to check is if you turn on the OS's high contrast mode, whether PC or Mac, can you still see/read your text when it's selected? If you can't, it's not a strict WCAG failure but would certainly be a usability issue.
Also, having a custom selection style does not preclude the user from having their own customizations. I do this myself. I have a style sheet associated with my various browsers so that my customizations show up on any website I visit. I have !important in my CSS so that it will override whatever the site tries to do so I could still have my own selection style no matter how you tried to set it.

Full opaque black text selection

Edit explaining why this isn't duplicated:As I said in the comment, it's not exactly duplicated because the answer there isn't the solution here. Here I started explaining how I got it as (1, 1, 1) and wanted it to be (0, 0, 0), while there they didn't went has far precise and got it only to (2, 2, 2). You could say the question is the same one but I think mine is better explained and I needed a good answer for the information that I provided.
By default, the background color of the text selection is blue with some opacity.
I tried to make it full black by using ::selection and testing the alpha value of rgba() but the closest I only got was rgb(1, 1, 1). Is it possible to get rgb(0, 0, 0)? Here's the code:
::selection {
background-color: rgba(0, 0, 0, 0.996093750000000055511151231257827021181583404);
color: #fff;
}
textarea {
border: 1px solid #000;
outline: 0;
resize: none;
}
<textarea autofocus onfocus="this.select()" spellcheck="false">Text.</textarea>
If I change it to 0.996093750000000055511151231257827021181583405 I get rgb(51, 51, 51) for some strange reason. Where do these randoms numbers come from anyway? I'm using Google Chrome.
[..] I get rgb(51, 51, 51) for some strange reason.[..]
A little trivia:
This pseudo-element ::selection was in the drafts of CSS Selectors Level 3, but was removed during the Candidate Recommendation phase.
See here: https://www.w3.org/TR/selectors/#selection
However, it was added again in Pseudo-Elements Level 4.
See here: https://drafts.csswg.org/css-pseudo-4/#highlight-selectors
I tried to dig up the old refs, like this one: https://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIfragments; but I couldn't find the problem you are facing.
Reason:
I draw upon the Level-4 specs, which says this:
For non-replaced content, the UA must honor the color and
background-color (including their alpha channels) as specified.
However, for replaced content, the UA should create a semi-transparent
wash to coat the content so that it can show through the selection.
This wash should be of the specified background-color if that is not
transparent, else of the specified color; however the UA may adjust
the alpha channel if it is opaque
So, what you are seeing is actually the wash that is being implemented by the UA.
That explains the behaviour on replaced content like that of textareas and inputs. However, although the specs say that for non-replaced content, the UA must honor the colors (with alpha channels); it seems the browsers have not yet completely implemented the spec (i.e. level-4 so to speak). They anyway aren't bound to. Heck they haven't agreed on complete level-3 compliance.
And, ::selection is anyway deprecated in level-3! So, this is the closest to the reason you can get. Live with it.
I found the formula/reason to why it's impossible the way I'm trying.
That "random number" is 1 - (1 / 256) which in another words means, it doesn't let me have opaque, it has to have the minimum of opacity that does change the original color without it, which makes the rgb(1, 1, 1) never get to rgb(0, 0, 0) no matter how many decimal numbers I find.
So unless there's another technique of changing the color of the text selection that I'm not aware of, it's impossible to obtain full actuall opaque black, only black with the minimum opacity/transparency which nobody can see the diference at human eye but still, it will always be rgba(1, 1, 1). :c
The other advanced, complex and unecessary way is to use hacks/tricks/workarounds with a lot of fake visual effects and probably JavaScript which is totally not worth the ammount of work.
Resuming: Alpha with the value 1 is opaque, all the values between 1 and 1 - (1/256) still are too but I can't use those values as it apparently doesn't allow me to use opaque so I can only use between 0 and 1 - (1/256). I'm not sure which if the exact result of 1 - (1/256) is opaque or not.
So the best way is to use background-color: rgba(0, 0, 0, calc(1 - 1 / 256));.
Provide the color codes in Hex format.
So, your ::selection becomes:
::selection {
background-color: #000;
color: #fff;
}

Blending div's background

I want such background blending effect like in screenshot attached.
I have already used rgba backgrounds but that does not looks like my designs.
Here is the image and code I used.
I tried using different background image and css3 elements but its not working properly.
Is this possible to this using any jquery?
.green_band {background: rgba(24, 95, 14, 0.5);}
No, at this time (summer 2014) you can only fake that using alpha transparency (e.g. using rgba).
The CSS blend modes will come, but “it is an upcoming technology, and, at the time of this writing, browser support is patchy”.
See “Getting to know CSS Blend Modes” for an introduction and the browser support tables for background-blend-mode.
Using the upcoming CSS blend-mode properties:
background-color: rgb(24, 95, 14);
background-blend-mode: multiply;
Here is the W3C Editor’s Draft: Compositing and Blending Level 1
I'm not sure there's a way to use blending modes outside of Photoshop unless you want to write WebGL shaders.

CSS Stylish popup background

I'm very very bad with CSS (I do not understand syntax at all), I'm just using my knowledge to tinker with code.
I'm using Chrome with Stylish addon, and I want to make dark wikipedia but with my preferences.
I took some code from stylish and just changed colors, but now it's something new where I have
to add stuff so I'm stuck.
It's obviously made in chrome, so it's temporary. This is my problem:
http://imgur.com/a/9IYI3
And my question is how to make that box opaque with like #555 color, without destroying everything else.
Here is code that I'm using: pastebin.com
EDIT: note that opacity will change the opacity of everything in the element it is applied to. Depending on the situation, rgba is the best route.
This can be accomplished a couple of ways:
#mybox
{
background-color:#555;
opacity:0.5;
}
Or
#mybox
{
background-color:rgba(85, 85, 85, 0.5);
}
The opacity property is to change the transparency of an element (0.0 is 0%, while 1.0 is 100%).
The same can be done with rgba (red, green, blue, alpha). Alpha being similar to opacity (same affect really).
As Dwza said in the comments, it would be good for you to take some CSS tutorials. A quick Google search will bring up many. This one looks good: http://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-css--webdesign-11906

Assigning color to div in CSS

I am using jquery.reveals.js plugin.
the following colors specified in css
#fff
#000
are being interpreted differently on different browsers.
Getting the following output on firefox,chrome,and IE 9 ( and above)
however I am getting some unexpected result with IE8
I guess above problem is because the color specified in css in only 3 digits i.e. #fff and #000.
How can I fix this for IE8
Well it looks like the IE8 one is correct, and the modern browsers are interpreting it to what looks like #000; but with some transparency, is there a setting of opacity: 0.5; somewhere that IE is ignoring and good browsers are doing??
It's probably because before IE9, IE's png handling was horribly flawed. If you look into the plugin's asset folder you will find a modal-gloss.png. Now when you opacity animate a sem-transparent in IE before IE9 it will loose its transparency.
Try disabling animation with
$(...).reveal({ animation: 'none'});
the colors are displaying properly. I think the problem is with opacity.
Here you can read about CSS Transparency Settings for All Browsers.
Specify the color in six characters, or perhaps better yet specify the color as an rgba value.
Stick to using the standard as intended without leaving guesswork for the browser. Meaning define in hex as #RRGGBB not #RGB. You can switch color value schemes (like to RGB) but that should not be your issue.
This link shows you examples of each color value scheme and talks about browser compatibility:
http://www.w3schools.com/cssref/css_colors_legal.asp
Try rgba(0,0,0,0.5).
More about RGBA