I'm currently working on a site, and somewhere in my mass of stylesheets, something is killing performance in IE. Are there any good CSS profilers out there? I'd like a tool that can pinpoint rules that are killing performance.
Before you ask, I've disabled JavaScript, opacity, and box-shadow/text-shadow rules. The page is still jumpy. :/ If I disable all CSS, it runs great.
I need a tool that can profile the page and report where the CSS bottlenecks are.
So, I finally got around to writing a JavaScript function that indexed all of my CSS classes on the page and then individually toggled them, while scrolling the page. This immediately pin-pointed the errant class, and from there, I was able to determine errant property. Turns out that border-radius on an element that contains many children (e.g. a body level div) performs incredibly poorly on IE9.
I've started a github repo for my CSS stress test: https://github.com/andyedinborough/stress-css
From there, you can install a bookmarklet to easily run the test on any page.
The Page Speed plugin from Google has a section that analyses your CSS and tells you about inefficient selectors, perhaps start there?
hth
Note: I know its a Firefox plugin, but should help optimize a bit :)
Hmm, never heard of such a tool.
If you find none, things to look out for manually will include
Any filter statements (the classic alpha=opacity and others - IE has a number of very advanced graphical filters that are extremely expensive)
Huge elements (like thousands of pixels large)
Huge background images - maybe remove them all for a moment?
I would strongly suspect the first point - alpha transparencies can be a terrible rendering bottleneck, especially on older systems.
I also have performance problems on a web project I'm currently working on. It runs well in Firefox, Chrome, even IE8. In IE9 it bogs down.
After some detective work I discovered that eliminating all box-shadow CSS lines improved performance considerably. I had shadows from banners, tables, boxes and tabs, each with just a subtle amount of shadow and blur, but apparently enough for IE9 to get all moody.
The Chrome dev tools used to contain a CSS Selector Profiler for doing just this sort of thing. You can see screen shots of it in this blog post.
The Chrome team pulled the feature in Chrome 30 stating that:
CSS selector matching is now reasonably fast for the absolute majority of common selectors that used to be slow at the time of the profiler implementation. This time is also included into the Timeline "Recalculate Style" event.
As such, I believe the CSS selector profiler is not as useful as it [might have been] used to and can safely be dropped. This will also reduce the fraction of developers trying to micro-optimize already fast selectors.
You could try to use an old version of Chrome to dig into the issue, but I'd recommend taking a look at the Timeline tab of the current version of Chrome dev tools with will show you how long Chrome has taken to calculate styles (where selector performance is affected), layout and paint the page.
Opera is experimenting with css profiling in its profiler.
It can be enabled following the steps on this page.
Then open the profiler, start profiling, and refresh the page you wish to analyze.
Stop profiling after rendering finishes, then the results will be shown.
Related
I am making a website, where when i preview it in safari. It turns out exactly as i want it to be. But when i test it out with firefox.
In my page i have a element that is aligned on the page using
Padding-left and Margin-top. Which works perfectly when i preview it in safari. But when i open the file in firefox. The element's Margin-top increases by a few pixels.
How do i code my css file so that i can have the same page for different browsers. I have tried looking on the web for a solution, but none of them so far has helped with the problem.
Reply's will be much appreciated.
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step.
If you are having an issue with FireFox, you are probably going to die when you look in IE. Bookmark this link! http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
You have a lot to learn and google will help: https://www.google.com.au/search?q=introduction+to+cross+browser+testing&oq=introduction+to+cross+browser+testing&aqs=chrome.0.57.5763&sugexp=chrome,mod=12&sourceid=chrome&ie=UTF-8
In future, use stackoverflow for specific questions with code examples. You will find that you get specific answers quite quickly.
Also, don't forget to tick the answer that you find most useful, and also vote some up a level. That's why people spend the time answering your questions.
Enjoy the long road ahead :)
Specify all four margin and all four padding values explicitly. That will eliminate the diffferences in the browsers' built-in default stylesheets.
There can be several reasons why your finding your layouts aren't cross-browser compatible, so it would take a considerable amount of info of the markup and css to make any kind of determination on how to help you code a 100% W3C valid web page.
I would suggest using a css framework like blueprint or 960 for your layouts, so you have less issues in this way. It's a good way to start and maintain projects, and learn how to create layouts if you choose not to use a framework.
Also, I would suggest testing all of your projects in chrome and firefox first, then safari, simply because of the amount of users that use those two browsers compared to safari. I would also say, if it looks good in chrome, it will probably look good in safari and firefox, but it's always worth testing.
I'm currently changing the look of select elements on my page and I noticed that almost every browser displays all the effects differently. That is not so bad alone but I also noticed that some browsers do not support some effects at all, for example Chrome does not support background image, rounded corners and probably something else I've not yet noticed.
I have seen some pretty impressive drop down menus on some websites where everything has been custom made, starting from the glows to the appearance of the arrow button and so on.
How is it done? Is it done with some Javascript/jQuery plugin?
Can anyone point me to some good resources?
I would suggest you go down the path of a jquery plugin. Doing a search for "jquery select box" returns a number of useful results, eg:
http://www.designdim.com/2011/07/10-important-jquery-selectboxdropdown-plugins/
I have tried out a number of these before, and some are more flexible than others.
One that I really like that is not in that list is Chosen, although it doesn't fully support IE7 and 8.
i've created some pages using css, but on viewing the page through different browsers it appeared as irregular arrangement of contents..
You're going to have to be more specific than this.
Which browsers display the page 'correctly' and which don't? Some older browsers have... dubious CSS support, and some of the things that work well in IE8/FF3.5 won't work in IE6/FF1.
Which CSS properties are you using & having trouble with? I take it you're talking about position or float or similar since you refer to an "irregular arrangement of contents", but that doesn't narrow it down all that much.
Are some browsers displaying the page as if there's no CSS being applied at all? It's possible you've got your stylesheet link a little wrong, and some browsers are 'fixing' it for you and some are just not loading the sheet at all.
Unfortunately, you potentially have more than one problem. Browser interoperability isn't going to be as easy as doing a setting. You have to compare some of the browser compatibilities and change your code to get it to look perfect in all browsers (if indeed such a nirvana is achievable for all page designs).
One thing you could try is a CSS reset such as MeyerWeb. This will remove some of the defaults that the browsers do not share - therefore potentially giving you similar looking pages from which, you can adapt to look as you want them too again.
There are other methods, including comparing all the differences. But unfortunately, my point is that this isn't likely to be a quick fix without knowing more about the specific issues your having.
Looking back at Stackoverflow podcast with Litmus (Podcast 78). The podcast discussed briefly the browser incompatibilities and quirks, especially with IE6 (a claim echoed everywhere). Litmus solution is to render the page in all the different browsers and look for differences.
However, I wonder how much incompatibility can be detected by simply analyzing the html and css directly, without actually rendering it.
I'm quite a newbie in this field. But I saw many references out there ... that document the IE 6 bugs and limitation, and how to avoid them when writing new documents.
If that's the case, then can a tool be made to validate and analyze the CSS and report any potential compatibility problems with the CSS?
Are there some incompatibilities that cannot be detected (due to lack of documentation) and potential limitation of such tool (when interacting with javascript and such)?
When we were developing Browsera, we tried to go about detecting cross-browser issues by looking at CSS styling alone. The problem is, it's the interaction between elements that causes the problem, rather than a specific style.
For example, if it were always the case that setting a margin would result in a double-margin, it would be detectable. However, the double margin bug in IE only occurs when there is a float in the same direction, and only for the first element in the row.
In addition to many of the IE6 layout engine issues, a lot of issues we detect are caused by different default stylesheets of browsers. For example, default margins and font size/rendering vary widely across browsers, which is probably the number one cause of layouts that look "not quite right" when you open them in other browsers.
The page seen by an Internet Explorer user is in fact built by IE parsing html and css; so, by definition, it is possible to build a tool that, knowing IE bugs, report potential problems.
Anyway, I don't think it would be easy.
Sure it can, but that's not the point of Litmus's business.
You can analyze a site and report on all the stuff that would render differently, but that wouldn't help much. Litmus's business is not designed to let you know what stuff is incompatible, it's designed to show you how it will be rendered, so you can figure out if and where your site needs improvement.
Making a website look exactly the same across all browsers is very hard, and takes a lot of resources. Often you'll need to compromise and make sure your site still looks decent on all these browsers.
No analysis tool can tell you if your site still looks decent.
I'm having major rendering issues in Safari with the web application I'm working on. Most of the design is done with divs using absolute positioning. This renders fine on Internet Explorer, Firefox, Chrome, Opera, Netscape, and konqueror. In Safari, it's just a jumbled mess.
Does Safari lack support for absolute positioning of div elements?
What is the best way to trouble shoot and find out what is going on with the safari browser?
UPDATE: I'd like to note I did find the issue, and I would like to thank everyone that gave suggestions. It was the WebKit's "Inspect Element" that gave the most useful information. It appears that their were conflicts with inline styles and styles from the CSS. While safari grabed the styles from the .css file, the rest of the browsers were using the inline styles. i was able to see those conflicts with the information in the tool that was suggested.
The problem may lie somewhere in your JavaScript; one of the most noticeable things about Safari is that it likes to stop executing JavaScript after any errors.
CSS is likely not the issue, since Safari has better standards and CSS support than any other browser out there (alright, I said it.)
Use the built-in Web Inspector in a recent nightly build of WebKit to track down your issues.
1. Safari's support?
Safari is actually a decent browser. If it has its flaws, they aren't any worse than those of any other browser, and they aren't of the class of the old IE browsers, which had very serious problems and lacked even basic support for web standards. To answer you question specifically, yes, it does support absolute positioning.
Safari can certainly render modern X/HTML CSS designs, and since your audience is largely using Safari anyway, you may as well forget the notion of dismissing the browser. It's a good browser, and in any case we're powerless to change it. We simply need to take care of these bugs, whatever they are.
2. How to go about debugging?
Without having a specific example, it's not something anyone can really help you to do. It seems fair to say that you're having some issues controlling css-based layouts. You may have some invalid markup, which in some cases could produce the kind of extreme browser-specific abnormalities you've described.
Start with the basics. Validate your markup and CSS.
Markup Validator
CSS Validator
Make sure you're rendering in standards mode.
Seek out answers to specific questions
If everything validates and you're still having problems, you'll have to track them down one by one. Even if you rebuild the page, piece by piece in Safari in order to see where things begin to unwind, it will be worth it to do. If during this process you really don't understand why a certain behavior exists, you'll at least have a specific question that you can use to poke around for answers. It may be answered already on SO, and if it isn't, you can ask it.