I'll be completing a website soon for my university (in fact, it's mostly finished now other than some mild tweaking) and I'd like to add a hidden thank-you to some bloggers who helped, and the stack overflow community which was a huge help. Right now, I've got a text section which is hidden this way:
<font style="font-size:0px"> - text </font>
But I feel like there's probably a better way. Is there?
This will keep its space, but not show anything;
opacity: 0.0;
This will hide the object fully, plus its (reserved) space;
display: none;
<div style="display:none;">CREDITS_HERE</div>
you can use css property to hide style="display:none;"
<div style="display:none;">CREDITS_HERE</div>
You said that you can’t use HTML comments because the CMS filters them out. So I assume that you really want to hide this content and you don’t need to display it ever.
In that case, you shouldn’t use CSS (only), as you’d only play on the presentation level, not affecting the content level. Your content should also be hidden for user-agents ignoring the CSS (people using text browsers, feed readers, screen readers; bots; etc.).
In HTML5 there is the global hidden attribute:
When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page's current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user. User agents should not render elements that have the hidden attribute specified.
Example (using the small element here, because it’s an "attribution"):
<small hidden>Thanks to John Doe for this idea.</small>
As a fallback (for user-agents that don’t know the hidden attribute), you can specify in your CSS:
[hidden] {display:none;}
An general element for plain text could be the script element used as "data block":
<script type="text/plain" hidden>
Thanks to John Doe for this idea.
</script>
Alternatively, you could also use data-* attributes on existing elements (resp. on new div elements if you want to group some elements for the attribution):
<p data-attribution="Thanks to John Doe for this idea!">This is some visible example content …</p>
display: none or visibility: hidden.
Here are two ways you can achieve this
You can display none or have a opacity none...But if you want the opacity to be cross browser compatible you would have to add this to your css
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
http://codepen.io/anon/pen/Krkfj
Not sure if this was what you were asking for, but I was personally trying to 'hide' some info in my html so that if someone inspected it, they would see the text in the source code.
It turns out that you can add ANY attribute, and so long as it isn't understood by the browser, it will just be left buried in the tag. My code was an easter egg: For people who couldn't afford to do the Makers Academy course, I basically encouraged them to inspect the element, where they would be given a secret URL where they could apply for a special, cut-price course (it's in haml, but it's the same idea in HTML):
.entry
%h2 I can't afford to do the course... What should I do?
%p{:url_you_should_visit => 'http://ronin.makersacademy.com'} Inspect and you shall find.
Or in html:
<p url_you_should_visit="http://ronin.makersacademy.com">Inspect and you shall find.</p>
Because 'url' is not a recognised html attribute, it makes no difference but is still discoverable. You could do the same with anything you wanted. You could have an attribute (in html) like:
<p thanks="Thanks to all the bloggers that helped me"> Some text </p>
And they'll be able to find your little easter egg if they want it... Hope that helps - it certainly helped me :)
use css property style="display:none" or style=visibility:hidden"
Use the CSS property visibility and set it to hidden.
You can see more here.
Related
Recently I am visiting a website,
but that website makes not visible a section by blurring it (and wants me to pay to see what there is)
I want that I can read through the blurred part of that website.
I read on the internet that there is some code that can solve this. (maybe with javascript or css)
if someone can help, thanks.
like he said #Dai, is better to pay if you really want that content. this is my suggestion, but I will help you the same
one line answer
just add a * selector with this css code filter: blur(0) !important;
so it will become like this:
* {
filter: blur(0) !important;
}
why does it work?
most of the websites for adding the blurring effect, they use the filter CSS property
if the code I show to you before,
don't work, then try using also backdrop-filter CSS property.
the logic is the same: backdrop-filter: blur(0) !important;
* {
filter: blur(0) !important;
backdrop-filter: blur(0) !important;
}
thank #Dai for the suggestion here!
how to use this code?
open devtools on the page.
CTRL + SHIFT + I
click "+" icon
change the selector to *
add the line of code of before.
how it works?
so we basically reset that blur
to all HTML elements using * selector.
so we don't worry about where there is the
element blurred.
by this, I mean that there are websites that make it difficult to find the element blurred: (for example "news websites", etc...)
by adding multiple filters
or nesting the blurred element
or adding the blur effect inline so normal CSS can't override it.
etc...
use also !important that make the resetting of the filter also in inline style="" attribute
it can't do results all the time
remember: there are also some websites that blur the content, but there isn't any real valuable content behind it (for example "LinkedIn" they do that, etc...)
in this example, you can see there is the same component with the same text, and there isn't any valuable content for you (try maybe in that website it will work)
I'm being forced to use this browser called Fresco by ANT. In it's specs it says it can handle CSS1. So I'm trying to create a link that has an image, and when hovered over, have the image change.
I've tried:
<td width="30% valign="top" align="left">
<div id="changeImage"></div>
</td>
My CSS is as follows:
#changeImage{
background: url(somefilepath1);
width: 218px;
height: 52px;
}
#changeImage:hover{
background: url(somefilepath2);
}
It works fine in Chrome, Firefox, etc... But in this awkward browser called Fresco, it doesn't show the image at all. I'm not even sure if this is considered CSS1 approved? I've googled and found CSS1 stylings, but nothing to exactly define what I'm trying to do. Any web guru have any tips on this for me?
Sounds like it has trouble reading the psuedo :hover. Technically this was implemented in the early days to be used with only an anchor. I believe Internet Exploder 6 has :hover support only for anchor elements still. This soon has been changed to support all elements on a page.
I would say, try using a sprite sheet where the backgrounds are loaded already and changing the background position of this element. Which would be best practice to do anyways because, you will get instant action, instead of triggering a server request and having the user wait for the new content to arrive.
Here is more detail on the technique and CSS1 does support the background position element
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Problem
I have a <select> where one of its <option>’s text values is very long. I want the <select> to resize so it is never wider than its parent, even if it has to cut off its displayed text. max-width: 100% should do that.
Before resize:
What I want after resize:
But if you load this jsFiddle example and resize the Result panel’s width to be smaller than that of the <select>, you can see that the select inside the <fieldset> fails to scale its width down.
What I’m actually seeing after resize:
However, the equivalent page with a <div> instead of a <fieldset> does scale properly. You can see that and test your changes more easily if you have a <fieldset> and a <div> next to each other on one page. And if you delete the surrounding <fieldset> tags, the resizing works. The <fieldset> tag is somehow causing horizontal resizing to break.
The <fieldset> acts is as if there is a CSS rule fieldset { min-width: min-content; }. (min-content means, roughly, the smallest width that doesn’t cause a child to overflow.) If I replace the <fieldset> with a <div> with min-width: min-content, it looks exactly the same. Yet there is no rule with min-content in my styles, in the browser default stylesheet, or visible in Firebug’s CSS Inspector. I tried to override every style visible on the <fieldset> in Firebug’s CSS Inspector and in Firefox’s default stylesheet forms.css, but that didn’t help. Specifically overriding min-width and width didn’t do anything either.
Code
HTML of the fieldset:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>
My CSS that should be working but isn’t:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
Resetting the width properties to the defaults does nothing:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Further CSS in which I try and fail to fix the problem:
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}
More details
The problem also occurs in this more comprehensive, more complicated jsFiddle example, which is more similar to the web page I’m actually trying to fix. You can see from that that the <select> is not the problem – an inline-block div also fails to resize. Though this example is more complicated, I assume that the fix for the simple case above will also fix this more complicated case.
[Edit: see browser support details below.]
One curious thing about this problem is that if you set div.wrapper { width: 50%; }, the <fieldset> stops resizing itself at the point then the full-size <select> would have hit the edge of the viewport. The resizing happens as if the <select> has width: 100%, even though the <select> looks like it has width: 50%.
If you give the <select> itself width: 50%, that behavior does not occur; the width is simply correctly set.
I don’t understand the reason for that difference. But it may not be relevant.
I also found the very similar question HTML fieldset allows children to expand indefinitely. The asker couldn’t find a solution and guesses that there is no solution apart from removing the <fieldset>. But I’m wondering, if it really is impossible to make the <fieldset> display right, why is that? What in <fieldset>’s spec or default CSS (as of this question) causes this behavior? This special behavior is probably be documented somewhere, since multiple browsers work like this.
Background goal and requirements
The reason I’m trying to do this is as part of writing mobile styles for an existing page with a big form. The form has multiple sections, and one part of it is wrapped in a <fieldset>. On a smartphone (or if you make your browser window small), the part of the page with the <fieldset> is much wider than the rest of the form. Most of the form constrains its width just fine, but the section with the <fieldset> does not, forcing the user to zoom out or scroll right to see all of that section.
I’m wary of simply removing the <fieldset>, as it is generated on many pages in a big app, and I’m not sure what selectors in CSS or JavaScript might depend on it.
I can use JavaScript if I need to, and a JavaScript solution is better than nothing. But if JavaScript is the only way to do this, I’d be curious to hear an explanation for why this is not possible using only CSS and HTML.
Edit: browser support
On the site, I need to support Internet Explorer 8 and later (we just dropped support for IE7), the latest Firefox, and the latest Chrome. This particular page should also work on iOS and Android smartphones. Slightly degraded but still usable behavior is acceptable for Internet Explorer 8.
I retested my broken fieldset example on different browsers. It actually already works in these browsers:
Internet Explorer 8, 9, and 10
Chrome
Chrome for Android
It breaks in these browsers:
Firefox
Firefox for Android
Internet Explorer 7
Thus, the only browser I care about that the current code breaks in is Firefox (on both desktop and mobile). If the code were fixed so it worked in Firefox without breaking it in any other browsers, that would solve my problem.
The site HTML template uses Internet Explorer conditional comments to add classes such .ie8 and .oldie to the <html> element. You can use those classes in your CSS if you need to work around styling differences in IE. The classes added are the same as in this old version of HTML5 Boilerplate.
Update (25 Sept 2017)
The Firefox bug described below is fixed as of Firefox 53 and the link to this answer has finally been removed from Bootstrap's documentation.
Also, my sincere apologies to the Mozilla contributors who had to block removing support for -moz-document partly due to this answer.
The fix
In WebKit and Firefox 53+, you just set min-width: 0; on the fieldset to override the default value of min-content.¹
Still, Firefox is a bit… odd when it comes to fieldsets. To make this work in earlier versions, you must change the display property of the fieldset to one of the following values:
table-cell (recommended)
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
Of these, I recommend table-cell. Both table-row and table-row-group prevent you from changing width, while table-column and table-column-group prevent you from changing height.
This will (somewhat reasonably) break rendering in IE. Since only Gecko needs this, you can justifiably use #-moz-document—one of Mozilla's proprietary CSS extensions—to hide it from other browsers:
#-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
(Here's a jsFiddle demo.)
That fixes things, but if you're anything like me your reaction was something like…
What.
There is a reason, but it's not pretty.
The default presentation of the fieldset element is absurd and essentially impossible to specify in CSS. Think about it: the fieldset's border disappears where it's overlapped by a legend element, but the background remains visible! There's no way to reproduce this with any other combination of elements.
To top it off, implementations are full of concessions to legacy behaviour. One such is that the minimum width of a fieldset is never less than the intrinsic width of its content. WebKit gives you a way to override this behaviour by specifying it in the default stylesheet, but Gecko² goes a step further and enforces it in the rendering engine.
However, internal table elements constitute a special frame type in Gecko. Dimensional constraints for elements with these display values set are calculated in a separate code path, entirely circumventing the enforced minimum width imposed on fieldsets.
Again—the bug for this has been fixed as of Firefox 53, so you do not need this hack if you are only targeting newer versions.
Is using #-moz-document safe?
For this one issue, yes. #-moz-document works as intended in all versions of Firefox up until 53, where this bug is fixed.
This is no accident. Due in part to this answer, the bug to limit #-moz-document to user/UA stylesheets was made dependent on the underlying fieldset bug being fixed first.
Beyond this, do not use #-moz-document to target Firefox in your CSS, other resources notwithstanding.³
¹ Value may be prefixed. According to one reader, this has no effect in Android 4.1.2 Stock Browser and possibly other old versions; I have not had time to verify this.
² All links to the Gecko source in this answer refer to the 5065fdc12408 changeset, committed 29ᵗʰ July 2013; you may wish to compare notes with the most recent revision from Mozilla Central.
³ See e.g. SO #953491: Targeting only Firefox with CSS and CSS Tricks: CSS hacks targeting Firefox for widely referenced articles on high-profile sites.
Safari on iOS issue with selected answer
I found the answer from Jordan Gray to be particularly helpful.
However it didn't seem to solve this issue on Safari iOS for me.
The issue for me is simply that the fieldset cannot have an auto width if the element within has a max-width as a % width.
Fix for issue
Simply setting the fieldset to have a 100% width of it's container seems to get around this issue.
Example
fieldset {
min-width: 0;
width: 100%;
}
Please refer to the below for working examples - if you remove the % width off the fieldset or replace it with auto, it will not continue to function.
JSFiddle | Codepen
I’ve struggled for many hours with this, and basically, the browser is applying computed styling that you need to override in your CSS. I forget the exact property that is being set on fieldset elements versus divs (perhaps min-width?).
My best advice would be to change your element to a div, copy the computed styles from your inspector, then change your element back to fieldset and compare the computed styles to find the culprit.
Hope that helps.
Update: Adding display: table-cell helps in non-Chrome browsers.
.fake-select { white-space:nowrap; } caused the fieldset to interpret the .fake-select element by its original width, rather than its forced width (even when the overflow is hidden).
Remove that rule, and change .fake-select's max-width:100% to just width:100% and everything fits. The caveat is that you see all of the content of the fake-select, but I don't think this is all that bad, and it fits horizontally now.
Update: with the current rules in the following fiddle (which contains only real selects), the fieldset's children are constrained to correct widths. Other than removing rules for .fake-select and fixing comments (from // comment to /* comment */, I've noted changes in the fiddle's CSS.
I understand your problem better now, and the fiddle reflects some progress. I set default rules for all <select>s, and reserve .xxlarge for those which you know will be wider than 480px (and this only works because you know the width of #viewport, and can manually add the class to those too wide. Just requires a little bit of testing)
Proof
Does anybody know how to remove the dotted outline on buttons in Opera?
I have done it.
Here you go: http://jsbin.com/oniva4. [tested on Opera 10.5/11]
The secret is using outline-offset:-2px; (effectively covering the dots) and the background's color for the outline. outline-offset is supported since version 9.5.
The introduction of the article Do not lose your focus
For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups.
In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable.
And the list of test given by the article on outline management.
Update 2011-02-08
I can confirm that it is not possible for now. There is an open bug for it.
I say this with the clear proviso that you shouldn't remove the outline unless you replace it with something else that indicates focus state ...
If you apply a transform to the element, it kills the outline in opera; it doesn't even need to do a visible transform, merely applying the property is enough. So this will do the job:
#myButton:focus
{
-o-transform:rotate(0);
}
But I can't promise that wouldn't be considered a rendering bug, and consequently something that may change in the future.
I believe the problem lies in where you specify the outline properties. Try this:
*:focus, *:active {
outline: none; (or possibly outline: 0)
}
I researched this more and it looks like on input fields and buttons it will not work unless you edit the browser's config, like Firefox's about:config page. It seems to be done for accessibility reasons so that a keyboard can be used to fill out and send a form without using a mouse.
I used that trick above for my text area and worked fine! Using a Text Area with an id "itens", here it goes!
#itens:focus, #itens:active{
outline: 1px solid white;
outline-offset: -2px;
}
So, you can play with that:
#itens:focus, #itens:active{
outline: 1px solid lime;
outline-offset: -2px;
}
Are you looking for:
button{
outline:none;
}
or if your button is an input...
input[type=button]{
outline:none;
}
Just read this forum post on the opera website
http://my-beta.opera.com/community/forums/topic.dml?id=712402
There seems to be no fix for it
Further to my tip above -- with experience I've found that it doesn't always work, and isn't always appropriate anyway, since it can change the way the element is rendered in subtle and sometimes unpleasant ways.
So, if that doesn't work, another thing you can do which often does, is to specify the outline color as "rgba(0,0,0,0)"
if you attached css-reset in your stylesheet should solve the issue.
Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
This is less of an answer, and more of an explanation as to what seems to be going on:
The story
My reason for removing opera's outline was to add an outline of my own. To add an outline I used:
:focus{
outline:1px dotted #999;
outline-offset:-3px;
}
This works perfectly fine in every other browser... except Opera. Opera instead gives you this weird interference pattern, which looks like a dotted-dashed outline:
now if you remove your outline, you still have the standard outline that Opera provides, a nice simple 1px spaced dotted line:
Since I have no way of adding a style to every browser except Opera, I instead decided on removing Opera's outline before adding my own. Using brothercake's solution, -o-transform:rotate(0); to do this and then applying my own outline:
Voila!
An Explanation?
From what I can tell, Opera adds it's own secondary outline on top of any outline defined by CSS.
This secondary outline seems to have an independent color, width, style, and offset.
Color is the opposite of the background,
Width is 1px,
Style is dotted,
and the offset is 2px smaller than the border.
sorry there is no style image, the upload didn't work correctly
one interesting thing is that the dotted style of the Opera outline is not the same as the CSS outline's dotted, otherwise there would be no interference pattern with both:
Conclusion:
As I stated above, I am using brothercake's solution which is to nullify the opera border with:
-o-transform:rotate(0);
As he mentioned in his later comment this 'fix' does have some issues as it is a rendering bug:
I have noticed that when returning window or tab focus to the page containing the button, if the button previously had focus, the Opera outline will reappears until the button loses focus or is hovered over.
better:
outline: solid 0;
for all web browsers
Whenever we select some text, the entire text area gets highligted. like this .
but is there any way to do away with this highlighting? I want just the color of the text to change and not the area to be highlighted as it appears in the image? am I clear enough?
Depends on which browsers you need to support. Not sure if Internet Explorer does support it, but here are the three CSS pseudo-elements you can try:
::selection (works in my Chrome)
::-moz-selection
::-webkit-selection
For example:
p::selection {
background:#cc0000;
color:#fff;
}
Also see http://www.quirksmode.org/css/selection.html
If you're talking about when someone selects the text in the browser (using the mouse or shift-selecting) then this isn't possible.
[UPDATE]
I take it all back - as #Dev F and #nico say, there's a selection CSS3 property. (Of course only some browsers will support this, but...)