I'm for years using something like this in my HTML for elements which should be hidden:
<div style="display: none"></div>
It's ok, but I can't stand in-line styles anymore.
Hiding elements programatically in JavaScript window.onload event is too late -- it will flash on the screen.
I can create CSS class 'hidden', but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded).
Is there any better way?
As far as I know the class="hidden" method is the best and most commonly used. I suggest you use class="hidden".
"but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded)."
I don't use Opera, but if any browser loaded the page before applying styles then a lot would look wrong, not just your hidden elements. I don't know of any browser doing this.
I have recently started using node objects, and I like this approach more and more. This way you don't have to use hidden HTML elements, you just place, for example, an anchor:
<a name="some-anchor" id="some-anchor-id" />
and then replace it with a created node. This way you won't have to worry about elements flickering on load, because there won't be any.
Depending on what the element is, it might be acceptable to generate and insert the element using javascript after the page has loaded (rather than hiding it after page load). Just a thought, although it wouldn't degrade gracefully for users without javascript enabled...
You could add to the hidden style a fixed position which would bring it out of a browsers window. This may be a solution to avoid having the div blink in Opera.
For example:
.super_hide{
position:fixed;
top:-1000px; /* you would need to know how height the content is or put something huge*/
}
Hoping this will help!
If you have a HTML only page those elements would be shown?
These elements are shown to screen readers by default, that's not very nice or accessible is it?
If you have HTML+CSS only page you can't unhide these elements, then there's no point in them apart from black hat SEO tricks.
If you have a HTML+CSS+JS page then there is value in have them.
There is only value in having them when you have JS enabled. This means they should _exist in the javascript
Use javascript to create these elements and inject them in the DOM.
if your build your website from the ground up using HTML, HTML+CSS, HTML+CSS+JS then you would realize they belong in your javascript code. Feel free to read more about Progressive Enhancement
You could define the class in of the page. It's slightly cleaner than inline, but you would have to have that single class definition on all pages. But then again, I'd try to use a single dynamic footer/header anyway..
Related
I have a single page application, and I have different sections where I want to print out list of images each on it's own page.
I thought maybe to use iframe for this purpose, but I wanted to have an answer from someone experienced with this situation.
What is the best way to approach this problem?
You can use CSS media queries to direct CSS rules at print time as described in this answer: How do I hide an element when printing a web page?.
You can then set different classes on some high level part object before printing to control which CSS rules apply and thus what gets printed in a given operation.
You can also have a whole stylesheet withe the media type set to print so it applies only when printing.
Or, depending upon the specific situation, you can open a new window, put the content to be printed in that new window and print that window. Usually, it's better to avoid opening a new window if you don't have to.
There is a CSS Template Module in the works and there is a Javascript implementation while browsers catch up.
I've had fairly good results with it.
We are developing a bookmarklet, and when the bookmarklet loads on different websites, eg: cnn.com, bbc.co.uk, yahoo.com it displays in various styles and we have struggle to reset these styles.
The bookmarklet content is in the current page DOM and not in an iframe (because we need cookies and access to DOM).
We tried using CSS reset, but that resets only some basic stuff, like margins. And pages where for example there is a custom form, or rounded table rectangles it inherits and it should not.
Is there a way that we can completely isolate this DIV area in the current page to look only as we want?
How about trying to replace your div with some obscure element that is unlikely to be on their pages.
eg. b or em or i or maybe even one of the newer html5 elements if you're not fussed about browser support.
And styling them to display: block to function like a div which is a block element.
Your resultant HTML is not going to be valid or pretty, but it's a bookmark so, meh.
Short of that, a really good reset is what you'll need.
Or you'll just have to live with slight differences in your styling.
We end up using https://github.com/premasagar/cleanslate
CleanSlate is an extreme CSS reset stylesheet. It is used to reset the styling of an HTML element and all its children, back to default CSS values. It is composed exclusively of !important rules, which override all other types of rules.
Well, you can use either the unique id and adding !important to each property afterwards - for resetting the generated element in the DOM - or you could use the new scoped attribute in "HTML5".
But that may result in problems with all explicit "inherit" valued styles on that element or the parents. For example, relative font sizes will result in problems, too.
Therefore is the experimental scoped attribute on the style section, but last time I tried it only Chrome/Chromium supported it, Firefox may have landed support for it recently, too - because there was a huge discussion on the mailing list.
http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped
Edit:
Another solution could be to use a custom element that is not in the DOM by default.
Something like document.createElement("thisisfrommyapp");
You can style them like other elements, but have to apply display:block or whatever behaviour want for them.
Also, IE allows using them, but you actually need to insert them into Tridents' parser before. If you want to use them in HTML, you have to do the createElement() before the DOM is parsed (so it's most likely inside the head of your document).
<html>
<head><script>document.createElement('customelement');</script></head>
<body><customelement>is stylable in IE8, too</customelement></body>
</html>
You have to do the createElement stuff for Trident only, because otherwise you will result in weird parsing behaviours due to their display:inline-block defaulted model :)
If you are using XHTML on the website for whatever stupid reasons (there are no valid reasons to use XHTML over HTML, due to parsers stripping out XML tags anyways), you should use a custom namespace for it.
~Cheers
Follow this 2 steps to sandbox a container.
<div class="namespace-box">
<h1 class="namespace-title">Title</h1>
<p class="namespace-text">Text</p>
</div>
Unset all properties of the container's namespace, all: unset; is just a placeholder:
[class*="namespace-"],
[class*="namespace-"]:after,
[class*="namespace-"]:before,
[class*="namespace-"]:hover:after,
[class*="namespace-"]:hover:before {
all: unset;
// properties to be unset
}
Use a Grunt or Gulp task to add the attribute selector to your original CSS. This increases the cascade and prevents overrides by the unset hack:
[class*="namespace-"].namespace-box,
[class*="namespace-"].namespace-title,
[class*="namespace-"].namespace-text {
// original properties
}
You can automate the specification with the postcss-increase-specificity task.
Enjoy your bulletproofed container.
I normally work with jQuery, which takes away most of the cross browser pain (although not, unfortunately, all). However, it doesn't seem to have any support for manipulation of the CSS DOM, and this still seems to be a bit of a minefield - QuirksMode has some information.
Our application allows users to theme their site to some extend by generating a CSS stylesheet with the colours that they have selected. It's pretty straightforward, but I'd like to let them "preview" it by applying the changes directly to the CSS DOM, before having them save it back to the database and generating the CSS file.
Does anyone know of a library which will make cross browser CSS DOM maniuplation easier? Just so we're clear, I'm not trying to change the css rules on an element, or set of elements (like with $.css()), or to add/remove classes. I would like to modify the stylesheets directly.
I highly recommend the YUI stylesheet utility. I haven't seen any other libraries with as much functionality or as clean an interface.
Couldn't you just add or replace a <style> element in the main document's DOM, and fill it with the generated CSS?
Best and easiest way, is to create a .jsp .php or whatever you're using which accepts colour parameters, which in turn renders a .css output with colours replaced.
Use JavaScript to make a request with colour parameters and append the css script to the page.
It is possible to do it directly on the styleSheet object, though this will take more time and create more maintenance. Everytime you want to change your custom stylesheet you actually use for production, you will also have to change the preview version. Ergo discrepancies will ensue.
Just reuse the stylesheet template you're going to use for production anyways.
Maybe you should try something like:
document.styleSheets[0].disabled = true;
This disabled the first stylesheet of the current page. Maybe if you play around with it you can resolve your problem.
I've published a website and every page has an or element with Cufon (cufon-yui.js) and sometimes while the page is loading , the visitor can see the text replacement tool doing it's job. It looks bad, some users are asking about it.
Why would that be happening if I'm using it (cufon) like anybody else and I don't' see this text rendering issue happening in most sites.
Also, there's an issue happening as well, with the Hyperlinks that are using Cufon.
Sometimes the cursor (a hand that appears for hyperlinks) disappear , it's bizarre.
Adding the following to your css should solve the issue:
.cufon-loading {
visibility: hidden;
}
use one of the google web fonts or typeface/
I've just started looking at Cufon, so I'm not sure I'm qualified to give an opinion, but I've read the IE has (or had) rendering issues and that you needed to add <script type="text/javascript">Cufon.now();</script> to the end of your body (right before the </body>. If you are running any other heavy scripts on the page, you might want to put them as low on the page as possible and place the Cufon.now() right above those scripts (place Cufon higher in priority). If that doesn't work, try hiding your Cufon elements with JS as soon as the DOM has loaded (visibility:hidden) and then unhide them when the onload event fires (though I'm not sure that's much better than the text flickering).
Use something better?: http://reisio.com/examples/webfonts/
(if you worry about distribution legality, replace your fonts with any of the numerous free clones available all over the internet)
In another question, I asked why it takes so long to remove HTML content from a page with jQuery.
Apparently when removing HTML content from an element, jQuery has to march through each element and do... something.. I don't know exactly what. And this can take a vvery long time for large-ish HTML content.
In an effort to side-step the problem, I'm wondering:
Is there a way to add dynamic HTML content to a page, that uses jQuery, but NOT allow jquery to "adopt" the content?
In other words I want some subset of the HTML content in a page to be outside of the purview of active management by jQuery.
In this particular case, the content is within a jQuery accordion. So I want the accordion to work, but for everything beneath the divs for the accordion panels, I want jQuery to not be aware of those things. The goal is to short-circuit the very lengthy process it takes to remove that content, later.
Does this make sense?
possible?
What if, instead of doing something like $('#elementid').html(content), I just used the innerHTML property on the element itself, using document.getElementById() Would that keep jQuery out of the subcontent?
I guess I'll try it, but if anyone has any insight, I'd appreciate it.
If it is in the DOM, the jQuery knows about it.
It does sort of make sense but sidestepping it is going to be ugly.
The first thing that came to mind was embedding your content with iframes. I'll freely proffer that this is an absolute abomination of an idea, but it should work as it should be a whole new document and thus a whole separate DOM.
Is it important that this content be kept? If they are visible elements, you could simple hide() them instead.