I thought:
.eventfuture
{
display: none !important;
}
Which is a very simple CSS class, ought to completely hide the text?
I apply the above to a paragraph class:
<p class="eventfuture">Text Here ABC</p>
What happens is that "Text Here ABC" is 100% hidden on the client side of the browser (good) but still present in the source code (bad).
Is this normal behaviour? I am sure it is not.
I don't want "Text Here ABC" to be indexed by search engines hence why I would like it completely hidden.
Any ideas what it is that I might be doing wrong?
Thanks
What you are asking is impossible by css. Both display: none; and visibility: hidden; will be shown in the source code.
However, if you want that part of your source code not to be indexed by google you can use:
<!--googleoff: index-->
<div>Something here</div>
<!--googleon: index>
But still some articles say this works and some say it doesn't.
I have been looking for a 100% solution for a long time. Some say using jquery .show() and .hide() can help as well.
IMPORTANT NOTE: Hiding text is not a good practice if you need SEO. Google bots don't like hidden texts such as display: none; because they think you are hiding keyword content.
I don't think any css would achieve what you're describing.
display: none
Just visually hides the element that it's styling.
If you want to remove the contents from the document you should use javascript and modify the text/innerhtml from there. An example would be:
document.getElementByClass("eventfuture")[0].innerHTML = "";
What display: none; does is not to hide the element from the DOM. It simply hides it from the user and search engines can still index it. Probably you should hide it from the server.
EDIT
To remove the element from the DOM entirely, this might be a fix:
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);
Real code snippet
Check w3schools tutorial on display none
Related
CMS issues preclude me from using tabview, so I've been looking at alternatives to get similar content organization.
I'm not really concerning myself with browser compatibility since this is more of a personal, abstract effort, ergo I've been looking at the <details> tag. Ideally, I'd like to do it without pseudo-classes (I'd like to be able to transfer it to inline CSS for other really stupidly backward CMS reasons). An extension effort of this that I've been puzzling over is the use of <details> as a checkbox alternative for similar reasons (CMS limitations preclude me from using checkbox hacks; believe me, I know how insane this sounds).
But before I dedicate a lot of time to trying to figure this out, is it even possible to 'recreate' the tabview effect with <details> and <summary>?
I think the simple TL;DR answer (if I read your question right) is 'NO'. But...
The longer answer is a resounding 'YES'. <details> and <summary> are semantic elements, so they are basically just divs with a different name - you get no extra functionality with them. However, if you give the details tag a tabindex it would become selectable, and you could then style the show / hide functionality through CSS.
Not being sure how you would want to implement this on your page it's tricky to give a complete answer, but as an example:
In HTML
<details tabindex="0">
Heading
<summary>Interesting factoids...</summary>
</details>
And in the CSS...
summary {
overflow: hidden;
max-height: 0px;
height: auto;
}
details:focus summary {
max-height: unset;
}
This would make the summary 0px in height by default, but would expand it when its parent container is clicked (focused).
You might need to play about with the details a bit for your particular use case, but CSS is the way to go.
The following does not work for IE11 for me:
input::-ms-clear, input::-ms-reveal {
display: none;
}
Side-issue, probably not relevant: Whether I have it in or not I get the same thing, which I'm guessing is the way this works: the first time you go into password field you get the show/hide icon, change fields, go back in and the icon disappears.
any ideas how to get rid of the reveal because I have to remove it?
thanks.
adding !important to the rule fixed it. Something, somewhere must have overridden this, but there are no other -ms* entries in the imported style sheets and html (however this is tricky as it uses the truly awful GWT which seems to obfuscate and hide everything)....
input[type=text]::-ms-clear {
color: red; /* This sets the cross color as red. */
}
I'm attempting to allow our CMS editors the ability to swap out the text used for a page title using only a css override.
<header data-alternate="An Alternate Title">
This Page's Default Title
</header>
Using the :before or :after tag, one could use one of many available alternate titles.
header:before {
content: attr(data-alternate);
display: inline-block;
}
If only we could also say,
header:text {
display: none;
}
Unfortunately, as far as I can tell, there is no good way to hide "This Page's Default Title" in order to replace it with "An Alternate Title". If this were a Sprite, we could use one of the well-worn image replacement techniques like Phark or otherwise. Not so much with text replacement generated by :before, because the :before is also affected by the CSS devices used to hide the default text so that, with Phark, for example, the :before content is also at -9999px.
There are solutions I'm trying to avoid.
Using the Phark method or somesuch to hide the default text and then using absolute positioning on the :before content to put it back at left: 0, top: 0. I want/need to preserve flow if possible.
Wrapping the "Page's Default Title" in a span and just setting it to display: none in the CSS when an alternate title is being used.
i.e.
<header data-alternate="An Alternate Title">
<span class="default">This Page's Default Title</span>
</header>
This works, but a span nested in a header is displeasing.
Is there a way to target a tag's text without also targeting its generated :before/:after content? Is there another way to do this?
I'm not sure if this is exactly what you want, but you could try something like this:
p {
visibility: hidden;
}
p:before {
content: attr(data-alternate);
display: inline-block;
visibility: visible;
}
http://jsfiddle.net/yJKEZ/
You can set the visibility of the p element to be hidden, and then set the visibility of the :before pseudo-element to be visible within it's parent (the p) despite it's setting.
If that doesn't quite work as expected, there isn't really anything tremendously wrong with adding an extra span in, to help the process. It might not be as clean, but it could work better.
I do, however, want to raise the question of why you might need to do this, and point out some concerns with an approach like this...
For starters, pseudo elements are not part of the DOM, so that alternate text can't be selected, and isn't as accessible to the browser (or the user). Screen readers or search engines will see the default text, and not pay any attention to the alternate text, but that's what your user will see... This could lead to some confusion.
While your question specifies that you want to be able to do this with CSS, and while it may be possible, it really isn't the best solution for doing something like this. Especially if your website is being viewed in an older browser which does not support pseudo elements (Now the user sees nothing at all!).
I would more recommend something like this for swapping an image out for alt text in a print stylesheet, or swapping a hyperlink's text for the full address that it links too (again, mainly for a print stylesheet). Changing important content like a heading in this fashion can cause a lot of other issues, especially in terms of accessibility.
Just something for you to consider along with my answer... I hope I've helped you with your problem!
Does the css content property break the rule of content and separation because css is for presentation not to generate content?
What are other good uses of the css content property? I've seen it only in clearfix hacks.
Does css "content" property break the rule of content and separation because css is for presentation not to generation content?
Good point. I'd say it does if it's used for actual data.
The quirksmode page on content shows the limitations pretty well. You can't add any kind of styled content at the moment - it will work with too few browsers. You can add only character data.
The author of the quirksmode airs an interesting opinion:
I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.
I agree with this in general, but sometimes there may be cases where you don't want to rely on JavaScript to do the job. The comma example shown by Martin is a case where I find using content justified (although I personally would be feeling better if the commas would already be served coming from server side - it's what I personally would stick to.)
Also, keep in mind that adding commas and quotes through the content property may look bad when your content is viewed from elsewhere - for example in a search results page.
I'd say use it only sparingly, if you really need it.
One popular place that this shows up is in WordPress' default theme
.entry ul li:before, #sidebar ul ul li:before {
content:"» ";
}
It could be used in print style sheets to show urls for links for example:
p a:after {
content: " (" attr(href) ")";
}
Some link (http://www.somesite.com)
It's good for structured content. I wrote a number of test cases for the W3C's next print CSS rules and the one that seemed cool to me was being able to put "Chapter " and things like that into certain elements, especially when paired with counters. A simplistic example would be something like:
li.chapter:before {content: "Chapter" counter(chapter) ": ";}
None of that's print-specific and it's all presentation information. If you don't want your chapters to be preceded with the word "Chapter", take it out of the CSS. Controlling that in a stylesheet means your print version could have different chapter headings from your screen version your mobile could be different again, without having to have any knowledge of the viewer's device inside your application logic.
I'm using it to display accesskey in admin panel menu
.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }
CSS is presentational data. Any content that's only presentation-related is fine in a CSS file. For instance, suppose I want to put « and » around my <h1> tags; that's purely presentational. You could do it with the :before and :after selectors.
It should also be noted that content can also display images:
content: url('my/image.png');
I'd like to add, on a side note, that I'd consider the use of the content property to override already existing content an extremely bad practice.
A common use I see for it is with :before and :after tags to format quotations with some sort of stylized quote box. It can be a quick and easy way to get in stylized elements that you would otherwise have build images out of.
blockquote:before, blockquote:after {
content: '"';
}
I think this is an okay use for it, because it doesn't really break rules of content and style separation. My feeling is that if it is part of the design of the page, rather than the content, it's probably okay for content:
One interesting use case, although maybe not recommended, is for placeholder text on contenteditables.
[contenteditable]:empty:after
{
color: #aaa;
content: 'Enter some text';
}
Like zneak said, it is also possible to replace images. I find it practical to replace "content images" (not "asset images", which should be done via css background images) with higher resolution variants on iPhone 4 and other devices that have more than one real pixel per virtual pixel.
E. g.:
<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
#media all and (-webkit-min-device-pixel-ratio: 2) {
/* e. g. iphone 4 */
#people9 { content: url(//lorempixum.com/400/300/people/9/); }
}
It works, at least, on iPhone 4 and Android Nexus S, but I consider it experimental and haven't tested it on other devices. Here is a complete example:
https://gist.github.com/1206008
I just want to add to what has already been said.
With Cascading Style Sheets you can apply styles to a lot of types of documents.
The common use case is to apply CSS to HTML pages. In this case, the general idea is to use the content property only for aesthetic purposes.
Another use case is instead to apply CSS to XML documents. In this case the document usually does not contain elements for page structure (div, h1, etc...). So, in this scenario, by using the content CSS property more frequently, you can better define the page and the relations between elements and data.
For example you could prepend a description paragraph before a table, or appending the email address after the name of a person. Note that in HTML pages these page-structure elements should be part of the HTML document itself while they are usually omitted in a XML document and so they can be added using the content CSS property.
One of interesting use cases would be localization of a User Interface.
I am currently building a webiste for a client whereby I am using CSS for the menu (not javascript). For the rollovers, have a background image that contains the regular state and the rollover.
an example code is: <a id="foo" href="bar.php" ><span>BAR</span></a>
I hide the <span> and use the background image instead.
My Question Is:
Is this form of navigation good for SEO? Is hiding the <span> seen as spam by the search engines. Will search engines even pick up this form of menu??
Please Help
Many/most/(all?) search engines will not understand CSS to the degree that they know you're hiding the <span>. For those, you're fine.
For any that are bright enough to understand your CSS, they'll also understand the reasons why people do that, and will recognise what you're doing. So for those you're fine too.
Many questions like this one boil down to "Are search engines just clever enough to misunderstand what I'm doing?" And the answer is no, because it's not in their interests. As the author of a search engine, you wouldn't add support for noticing CSS-hiding without also adding reliable heuristics to tell the difference between its normal use and its abuse.
You may use text-indent css property for your <li> or <a> element. This way you won't have to hide it via css. So you'd have something like this
<ul>
<li><a id="foobar">foobar</a></li>
</ul>
Then you could have following css:
li a {
display: block;
text-indent: -1000px;
width: 20px;
height: 20px;
background: transparent url('/image/path.png') no-repeat;
}
If you are simply going to hide them using
display: none;
then you will want to check out the question Stack Overflow thinks is most related to yours: Google SEO and hidden elements.
Summary: Google ignores anything it can determine is invisible to humans.