As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I'm looking for a tool that can analyze a large site and look for orphaned css.
I work on this project that has gone through a couple of UI updates. Scrapping the whole thing and redoing it all would take forever. What I would like is a tool that reads a css file and then lets you browse the site, keeping track of what definitions were used and how often.
Then I can go through the css file and find code that I did use and determine if it is indeed deprecated and can be deleted.
Thoughts?
Firefox has a great extension called Dust-Me Selectors for flagging up classes/ids that are not used on the current page.
There's also TopStyle, which promises to help you do the following (I've not used it, and can't vouch for it though):
Preview CSS while you write it.
Easily create pleasant color schemes for your site.
Style Checker validates your CSS syntax against multiple browsers.
Use Site Reports to see at-a-glance where CSS styles are used in your site.
Style Upgrade quickly replaces all outdated HTML code with equivalent CSS styling.
Internet Explorer 8 has this feature called Developer Tools which can help you with that. You can read about it from the IEBlog entry. If you don't have IE8 you can download the toolbar from here.
I would suggest CSSEdit. Been using it for years. Has an inbuilt validator and an x-ray inspector.
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I'm looking for a website that duplicates at least some of the most basic features of Firebug, Chrome developer tools, etc, but that is simple enough for a non-developer to use.
At the very least, I want to be able to tell a non-developer to:
Visit http://checkthedom.com/sitethatneedschecking.com
Hover over a particular paragraph of text or some other element
Tell me font etc is used in that element
I need to find a web site that does this because I can't ask the non-developers to use bookmarklets or install browser plug-ins or to follow instructions that will vary depending on what particular browser they are using.
I've pasted an image below that shows what I want the non-developers to see.
Is there a website that does this?
A couple of sites I've tried do this:
XRAY
X-Ray Goggles
Although it doesn't show the CSS as a popup (it's on the right hand side of the window), the Firefox built-in 3D viewer might help visualise the site.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Does anyone know a good place to learn css? When I say css I do not mean how rules are matched . The w3school tutorials do a good job showing how changing certain properties effect a single element, but it doesn't show you how to bring all these skills together to build something bigger. Thanks
There is some genious technology called "learning by doing". I would really recommend you to do this ;-)
Think of something somebody could need and build a website. There are plenty of websites which provide you with material:
http://www.cssbasics.com/
http://blog.jm3.net/2007/03/16/the-only-ten-things-to-know-about-css/
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
AND last but not least NEVER ever refer to w3school.com because of http://w3fools.com/
I'd first like to point out that w3schools, although a good place to start, should ultimately be abandoned once you feel the need to explore further.
A great resource for CSS is MDN's (Mozilla Developer Network) here.
There is also a list of separate tutorials here.
The best place to learn CSS is Google. Seriously, if you want to build something bigger, you bring little things together and make something bigger out of them. By trial and error as well as researching on Google for some certain features, you can learn CSS and build something bigger.
Andy Clarke has written my two favorite books on CSS and web design at large. I recommend his latest - Hard Boiled Web Design:
http://www.hardboiledwebdesign.com/
I find that Mozilla Developer Network has the best documentation for most web technologies, as seen here
Anyways, here's their CSS tutorial
Best idea is to get some template from web and try to remake it - trying to change sth bigger gives you better overview of whole thing. Than You can try to make sth yourself from scratch.
I think www.codepupil.com plans to offer CSS lessons in the future.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I've been using Paint.NET to create mockups for my web application. They're pretty, and it's not hard to save the constituent graphical elements. However, the process of getting my layout into CSS is completely manual and time-consuming.
I'm aware there are better tools out there for this. Should I be looking at DreamWeaver? I'm not looking for any auto-generated web or data access functionality, and I'm happy to code all the behavior myself. I'm mostly looking for a great-looking layout editor that understands both layered imaging and CSS. (Preferably, one that can map a layered image to HTML and generate initial CSS with the right styling.)
Thanks in advance for any and all insight!
Jeff
A text editor, really.
It's time consuming, yes, but so is doing anything right. I have yet to use any program that builds the design of a website with a level of markup quality that I find even remotely acceptable. Where you may give a div a class of userInfo, most layout programs might give that div a class of style12 or something equally unhelpful. This results in unmaintainable markup, which is especially hard to build into a web application.
So learn how to do it by hand, and then do it by hand.
Axuer can be used to take mockups/prototypes and export as HTML/CSS: http://www.axure.com/
I only ever used it for prototyping.
There are no apps that will make it a css3, they apps that exist will give you a lot of image sprites and css2 and a lot of bugs you have to fix manually :/
So suggest coding it manually or hiring someone who does it(Kinda cheap these days even I would do it if I get paid well enough)
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 12 years ago.
My question may be silly but I think it´s not.
I´m using flex with Ruby on Rails backend to develop rich internet apps. Recently flash has been attacked, an example is Steve Job´s thoughts on Flash.
I think flex is a wonderfull tool, but to be honest I really would rather to have a tool as productive as flex but compliant with open standards.
For me, in a perfect world I would code in MXML just like I do now and Flex Builder would build a pure html5 front-end.
My question is, is it likely to happen? It is allowed to dream anything, right... :-)
Is it likely to happen? No.
Is it allowed to dream anything, yes.
MXML is an XML vocabulary designed to generate ActionScript, which is the underlying language of Flash. Since ActionScript is based on ECMAScript, the same standard as JavaScript, it's possible that MXML could be adapted to output JavaScript. But the reason it doesn't is because JavaScript doesn't yet have the same capabilities as ActionScript.
I doubt that MXML or Flex would ever have an output to HTML. To make that work they would need an HTML version of The Flex Framework, which would most likely be written in JavaScript. It seems very unlikely to me.
I believe one of the sneak peaks at the last Adobe Max conference, they did show a Flash Professional animation exported to HTML5.
[Start Speculation]
I assumed the HTML version was making use of the Canvas elements in HTML5, while resources were most likely PNG.
[End Speculation]
But I honestly have no idea how it actually worked.
You can probably find videos on-line of the sneaks. Good luck!
Simple. MXML was introduced to replace HTML. I doubt they would come where you can generate a HTML 5 generated code. Not possible, and i doubt even adobe would come up too.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Is there a "best" way to edit CSS?
I'm looking for a designer tool. It has to "visual"... less code.
Visual studio does a good job but it seems to be lacking when it comes to the actual design stage.
My suggestion is CSSEdit by MacRabbit. It's focused on just editing CSS, and is very visual without hiding code. You can edit CSS attributes through a GUI, or directly edit the text in the code. You can preview your work on any site, even applying your edited CSS to the display of live Web sites. As a plus or minus depending upon your platform of preference, it's a Mac only application.
Here's what I do:
Design the page semantically, using lists, headings, paragraphs etc.
Add classes and ids where appropriate.
Open the unstyled page in Firefox.
Open Firebug.
Write/edit the CSS there and see the results instantly.