Is there any problem with using jquery layout plugin (there are several) to layout a page as opposed to using CSS and fixing browser compatibility issues myself?
Another problem is that the page has to fully load and download the javascript, then get rendered. This will slow down the page significantly.
The most obvious problem is that any visitor to the page using a browser with JavaScript turned off will not get the layout. If you're willing to turn away from those people, that may not be a blocking factor for you.
There can also be performance issues, delays on resizing the browser window, that sort of thing.
I'm not saying don't do it; if it's appropriate for your target audience. But look to see if you can avoid it or at least gracefully degrade if JavaScript isn't enabled. (Turn off JavaScript and come here to SO, for instance; still very usable in a read-only way.)
If doing this, continue to be sure to mark up your content in the main page (rather than only adding it dynamically) and use the most semantic markup you can, to improve your search-ability.
When your layout doesn't behave for whatever reason (and that will happen), will you be able to understand the code behind the JQuery plugin to fix it?
Invest in yourself and learn CSS properly, it's not hard, it doesn't take long and it will equip you for the future, don't just rely on plugins. Now I'm not saying never use a plug-in, but this to me seems inappropriate use
Related
Using a content script, I plan to insert a UI into the page in an <iframe>, but I have a few concerns.
Do people commonly use settings/extensions to block iframes on the page?
If my extension's iframe is blocked, is there a way for me to detect this?
Any other reasons to avoid the use of iframes in this scenario?
There are similar questions on the site, but they don't specifically ask what I want to know.
[The reason I want to use an iframe is this: My extension has to run independently of the website loaded (i.e. on any webpage). Its content script needs to show a UI for settings/help etc. Currently it does so by inserting a div into the page's DOM. However CSS from the webpage gets applied to the extension's UI, something which is harder to fix than one would think. Using an <iframe> seems to a way to avoid this issue.]
As you've discovered, trying to sandbox your CSS from interference, when injecting into the DOM is very difficult without declaratively setting every known style attribute. It's a well documented problem and some solutions can be found in the following posts:
How do I prevent CSS interference in an injected piece of HTML?
Is there a way to "sandbox" an HTML block away from its page's CSS without using iframes?
There's nothing fundamentally wrong with dropping your UI it into an <iframe>. I'm not aware of any settings or extension that would block this behaviour.
If your framed UI needs to interact with the DOM on the parent page or a content script you can do so with the use of Window.Parent. Also you may need to consider Same-Origin Policy if your pulling in the UI from another domain.
Answers in order:
People do not commonly use settings/extensions to block iFrames. Rather the opposite; the biggest complaint is how to get content out of iframes placed by ISP's and leach/wrapper sites, etc.
Yes, you can detect if your iFrame is blocked by having your iFrame's JS send an "I've started" message. If the message is not detected, assume the worst. :)
No reasons to avoid iFrames, other than they are a bit of a PITA to work with. If you just need to "show a UI for settings/help etc.", then it might be better to have your extension just open one of the popup window types available to extensions. You control the HTML/CSS/JS of those completely without worry of interference by the page.
I don't know if there is any easy answer to this, but can anyone give me any idea why my site is totally crapping out in IE8? Is there something relatively easy that I can address to make it not become a complete mess?
Or at least any area to start investigating where similar problems tend to crop up in IE8?
Thanks!
http://firewalkcreative.com/2012/
Start by viewing and fixing validation errors. The most critical errors are often structural ones, like an unclosed tag. While it's good practice to fix non-structural errors (such as the one you mentioned in your other post), browsers are forgiving if you get the basic structure right.
The bigger culprit (but don't neglect fixing validation errors) is that you are using HTML 5 tags which IE8 knows nothing about like section and header. Thus, the CSS styles aren't applied to those tags. Modernizr will easily fix this.
I noticed it was using html5, then got a timeout upon refresh. Without being able to access the site I can't tell you exactly, but html5 and ie8 are going to cause problems (most of the time) unless you use a workaround like a .js plugin.
I frequently use Modernizr
I just worked out, by trial-and-error, that IE 7 has an upper limit of 32 stylesheet includes (i.e. tags).
I'm working on the front-end of a very large website, in which we wish to break our CSS into as many separate files as we wish, since this makes developing and debugging much easier.
Performance isn't a concern, as we do compress all these files into a single package prior to deployment.
The problem is on the development side. How can we work with more than 32 stylesheets if IE 7 has an upper limit of 32?
Is there any means of hacking around this?
I'm trying to come up with solutions, but it seems that even if I loaded the stylesheets via Ajax, I'd still be writing out tags, which would still count towards the 32-stylesheet limit.
Is this the case? Am I stuck with the 32-file limit or is there a way around it?
NOTE: I'm asking for a client-side solution to this. Obviousy a server-side solution isn't necessary as we already have a compression system in place. I just don't want to have to do a re-compress every time I make one little CSS change that I want to test.
Don't support IE7.
To avoid confusion: I'm not seriously suggesting this as a real solution.
Create CSS files on the server side and merge all files that are needed for this certain page.
If you are using Apache or Lighttp consider using mod_concat
Write your stylesheet into an existing style block with JavaScript using the cssText property, like this:
document.styleSheets[0].cssText += ourCss;
More info here:
https://bushrobot.blogspot.com/2012/06/getting-around-31-stylesheet-limit-in.html
At my last company we solved this by mashing all the CSS into one big document and inserting a URL in the web page that referenced that one-shot document. This was all done on-the-fly, just before returning the page to the client (we had a bunch of stuff going on behind the scenes that generated dynamic CSS).
You might be able to get your web server to do something similar, depending on your setup, otherwise it sounds like you're stuck with only 32 files.
Or you could just not support IE7 ;)
Maybe not and I need to do this in HTML but is there a way to write
if($('.Name1 li').length>2) $('.main').css('k', 'v');
I did this in JS and if I am loading the page for the first time I see a noticeable pop happen. Its not 'bad' but I do 'notice' it.
It would be better if you check this condition on server side (php, ruby, C#, python, whatever) and assign some class then.
CSS is not a programming language, it is not designed to interact with HTML in this way.
Something similar is or will soon be possible using JESS, a framework combining CSS with JavaScript for, umm, "dynamic styling." I haven't looked at it in dept myself yet, but it may be worth a look for people interested in this sorta thing.
Unfortunately you're always going to get this flash of unstyled content whenever you do this kind of class setting with javascript since the JS is loaded after everything else on the page.
Without knowing what specifically you need to achieve, some suggestions would be to use some kind of placeholder CSS on the offending elements (setting a width / height / colour / whatever it is you need) to try to mitigate the effect. You can also try to mitigate it by making sure your page is optimised as much as you possibly can, so give it a run through with yslow and see if there are any speed improvements you can make.
The only other (and best) way would be to use klew's suggestion and insert the class server-side instead of waiting until the DOM has loaded for JS to do its stuff.
Some users are reporting that my site is too slow
And i think background images in css might be a possible
culprit
I have a site that uses a custom build system
to concatenate all css, compress them ( yui compressor ) , make css sprites
automatically ( smartsprites ) and I end up with a 9kb CSS for the
whole page, this includes all css for background-images at last is d they
were around 60 ( several go to the same sprite not sure how many )
I was wondering if the default behavior of browsers
is to download the images as needed ( when they match a selector )
or download them all.
Right now firebug in firefox seems to suggest that they are all been downloaded.
What techniques would you suggest i'd use to avoid the problem, and or
mitigate it.
edit:
I misread firebug, the images that are being downloaded belong to a lightview
that is hidden but the background-images are matched to the dom.
No, in fact it's better to put them in the CSS than in the markup.
The image calls will not block the page and as the images are loaded they will be rendered on the page so overall it is a good idea to load them via CSS. Not to mention that this design is also more flexible.
(It goes without saying that each of those images will take up bandwidth and extra HTTP requests)
the default browser behavior is to download two items at a time(i.e. 2 http requests), if you think you have lots of images create a sub domain for your images like images.yoursite.com and you will start seeing the browsers making parallel request, and you can see some improvement in performance
(Side topic. Not really answering your question. But might be interesting or even relevant.)
I think another possible culprit is that "some users" will always feel that your site is "too slow". (Maybe it's more of a Mental Breakdown than Stack Overflow thing? What do these users consider being a fast site? Can they give examples? How fast is their connection and computer? Where are they, and where is your server located? What exactly is slow? The signup process? Watching videos in HD? Scrolling the window? Loading Firefox? After all, it's humans.. n'est pas?)
Maybe take a closer look at the image(s) you're sending, particularly if there are a lot of them being compiled into a single "sprite" image.
What could be happening is that the image you're pointing to is very large. Sure, it should only be loaded once (the benefit of the sprite method), but if it's several hundred KB it could certainly cause some performance problems.
There's a nice firefox plugin called Yslow that gives you some useful information about performance optimization. It shows you performance issues it detected, and gives you links to articles suggesting an improvement.
http://developer.yahoo.com/yslow/
Some info on best practices
http://developer.yahoo.com/performance/rules.html