Updated: July 6, 2009
CSS viewer tool that can be accessed via the Chrome address bar. To deploy the CSS Peeper add-on, you need to navigate in the host application to the appropriate page in the Chrome Store and press the “Add to Chrome” button. The CSS Peeper icon will be placed next to the address bar, and you get to activate its panel with a simple mouse click. Tidy CSS; The last command uses the default template, which balances readability and compression. If you can decipher the complicated pattern for creating custom formatting rules, SublimeCSSTidy will happily use them. An example of a custom template file is included (template-medium.txt). Windows Support. If you do not have PHP installed. Go to Atom's Preferences. By Choosing Atom Preferences. On Mac, or File Preferences. On Windows/Linux) and choose the Install option in the left hand menu. In the Search packages text field, type 'lint' and press Enter/Return to search for linting-related packages. You should see a package called lint at the top of the list. Balthisar Tidy (pro) will build the version distributed as “Balthisar Tidy for Work” on the App Store. Yes, this is the paid version that includes AppleScript support and the ability to export Tidy configuration files, as well as future, unspecified changes.
The min CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min function can be used anywhere a, or is allowed.
There are two ways to go about web development: the text editor way and the GUI editor way. The first way is intended mainly for more advanced developers, who understand the code, know what they want and do not require visual aids to build their web pages. They work with programs like vim, emacs, Notepad++, Kate, or other text editors and simply load webpages into browsers when they feel the need to see the end result of their work. This approach is minimalistic, efficient - and harder.
The second way is what most people do: use some sort of a program that usually hides the code away from users and lets them focus on content. Programs used for this purpose are known as web editors. Moreover, they fall into the category of What You See Is What You Get (WYSIWYG), meaning that the page displayed inside the editor's GUI will match the end result. Some of the more popular titles include KompoZer, Dreamweaver, Quanta, Bluefish, and other friendly web development software that let people approach the subject with the mindset of Lego building. The WYSIWYG editors are far easier to work with than text editors, but they are usually less efficient.
And they leave behind a lot of crud.
When you work with text editors, every byte of code in the web files has been placed there by you. On the other hand, web editors usually quite liberally pepper the code with auto-generated meta fields, self-promotional comments and lots of unneeded breaks and whitespaces, rendering the code much bigger than you intended.
Most people will not notice or care about the surplus, but if you like to go about your web development in a clean, orderly, spartan way, but still want to use GUI editors, there is a number of tools that can help you maintain lean and neat code.
These tools are known as lint/tidy utilities and are used to render the output of HTML and accompanying files smaller, cleaner and better laid out. In this tutorial, I'm going to present a collection of these utilities, most of which I personally use, so that you can too enjoy a more elegant and cholesterol-free web development. Let's start.
HTML tidy is the probably the most popular HTML tidying utility available. This little program can do wonders with your code, helping fix invalid HTML, removing extra whitespace characters, improving layout and indentation of the final markup.
It can be used on all major operating systems. Furthermore, most web editors are capable of running tidy from within their own GUI, making it easier to both work and maintain clean code.
Here's an example in Bluefish on Linux Mint 6 Felicia:
Here's an example of Tidy configuration in KompoZer on Windows XP:
For more about these two excellent web editors, please check this article. A popular Windows text editor Notepad++ comes with the Tidy plugin already installed, so you can edit the code without leaving the editor.
Here's an example of how Tidy works. I'm going to write a few words in a blank text document and then run Tidy against it. Not only will Tidy beautify the output, it will add the missing, necessary HTML (XHTML) tags and create proper indentation:
You can also convert HTML to XHTML, convert to or reindent XML, use wrap, and even clean Microsoft Word documents!
In general, Tidy is a command line utility. All it takes to run is to invoke it against a desired HTML file by running tidy filename.html. The HTML file should not have any dots, except the expected extension, or whitespaces in its name, as these can break the functionality of the utility. Which stands to reason and general 'good' coding guidelines.
Similarly, if you invoke Tidy inside one of the web editors, depending on how they're configured, you may get a long report of all discrepancies, errors and warnings found. Bluefish will do this for you:
Tidy comes in many shapes and forms. The best source of information is the official page. You're also welcome to take a look at Dave Raggett's page, the original developer, although development, fixes and improvements in the project are now all consolidated at the SourceForge site.
Tidy comes included in the repositories of most, popular distros, so obtaining it should not be a problem.
Windows users have several choices: they can use Notepad++, for example, or go for a Windows executable, which can be then invoked either from the command line against HTML files or use a web editor like KompoZer and call it via one of the plugins.
If you dislike command line, Dirk Paehl has also developed a GUI version, also available on other operating systems.
Tidy can also be used directly online, no installation required. Several websites offer this service, including the W3C international WWW standards organization itself. You merely need to link to the URLs of your HTML files and run them through Tidy.
There's also a Firefox extension available, although for Windows only. The extension is quite hefty, 2.6MB of downloads, but it provides you with extended validation capabilities inside your browser. You should also visit the official site for more details.
Then, there's also Java, Python, PHP, and Ruby version of Tidy. The list is almost endless. Always acyclic distributed path computationsoftware projects.
CSSTidy is an open-source CSS parser and optimizer. Like HTML Tidy, it is used to clean the code of CSS files, convert property strings to hex code where available, remove whitespace characters, remove and merge duplicate properties, and more. This way, CSSTidy can bring down the total size of CSS files by tens of percents.
CSSTidy is a cross-platform solution, available on Linux, Windows and Mac. C++ and PHP versions are also available. There's also an online formatter and optimizer, available in five languages, very similar to what we've seen with HTML Tidy.
Like HTML Tidy, CSSTidy is a command line utility and extremely simple to use.
Here's an example of CSSTidy optimizing a CSS file:
This is another HTML optimization utility you may want to consider, although it is less powerful and less portable than HTML Tidy, since it only works with HTML 4.0 documents. It comes included with Bluefish. In general, Weblint is only available for Linux (in the repos).
HTML and CSS tidying utilities are very useful, whether you're an amateur or a professional developer. If you strive to create high-quality content that meets the strict international standards of compliance, you should consider using them.
Not only will they help create a better laid output and make the files more compact, they will force you to change the way you think and work, by adhering to web standards. You will improve the overall quality and consistency of your web documents. And your readers will be able to enjoy first-class content, without worrying about how the output may look like in this or that browser, on this or that resolution.
If you want to enter the world of web development or are making your first steps in it, this is the best time to consider using HTML Tidy and CSSTidy. Not only will you make your own work more pleasant, you will help the big world of code become a tiny bit better. Hey, every humble contribution matters.
Sublime Text package for tidying CSS.
|Jan 24||Jan 23||Jan 22||Jan 21||Jan 20||Jan 19||Jan 18||Jan 17||Jan 16||Jan 15||Jan 14||Jan 13||Jan 12||Jan 11||Jan 10||Jan 9||Jan 8||Jan 7||Jan 6||Jan 5||Jan 4||Jan 3||Jan 2||Jan 1||Dec 31||Dec 30||Dec 29||Dec 28||Dec 27||Dec 26||Dec 25||Dec 24||Dec 23||Dec 22||Dec 21||Dec 20||Dec 19||Dec 18||Dec 17||Dec 16||Dec 15||Dec 14||Dec 13||Dec 12||Dec 11||Dec 10|
SublimeCSSTidy is a Sublime Text package for cleaning and tidying up your CSS. It's mostly a wrapper for the CSS Tidy PHP Library, but it will fall back on a bundled CSS Tidy executable for Windows users without PHP.
SublimeCSSTidy adds three commands to the command palette:
The last command uses the default template, which balances readability and compression. If you can decipher the complicated pattern for creating custom formatting rules, SublimeCSSTidy will happily use them. An example of a custom template file is included (
If you do not have PHP installed, SublimeCSSTidy will use a bundled version of CSS Tidy. This program is from 2007, and may not have complete support for all CSS3. Consider installing PHP.
csstidy.sublime-settings for a documented list of options.
If you have Package Control installed, you can install SublimeCSSTidy from within Sublime Text 2. Open the Command Palette and enter “Package Control: Install Package”, then search for CSSTidy.
Clone the repository into your Sublime Text 2 packages directory:
Go to the download section and download the package. Unzip it, rename the folder CSSTidy and move it into your Sublime Text 2 packages directory (Preferences > Browse Packages in the menu)
Submit an issue.