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;
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
hiddenattribute 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>
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;
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 the CSS property visibility and set it to hidden.
You can see more here.
tag instead...
– TDsouza Apr 18 '13 at 13:02