I have a stylesheet with the following code:
.author-name:before {
content:"by: ";
}
When I run this through YUI Compressor, I get:
.author-name:before{content:"by:"}
This is a problem because it wipes out intended whitespace. I thought using the YUI Compressor special comments, like this:
.author-name:before {
/*!YUI-Compressor */content: "by: ";
}
... might help, but it seems not to. Additionally, the comments themselves got wiped out. My impression based on the was that comments in JavaScript that start with /*! get preserved, but that's not actually happening.
Short of post-processing my build process to unminify, is there a way to do this? We're currently using version 2.3.5 of YUI compressor, and running with the flags --charset utf8 -v -o
So my question, in short, is, is there a way to get YUI Compressor to respect spaces in content: values, or a way to add CSS comments before and after a block I don't want minified?
As a workaround, try using unicode entity instead of space character itself:
.author-name:before {content: "by:\00A0"; }
\00A0 in particular is non-breaking space.
I tried your css using version 2.3.4 and 2.4.6 and both preserve the space inside the string. So it's either a very specific bug (can't find anything in the bug tracker) or something else is going wrong. Are you sure it's a ascii space character and regular apostrophes (not the Windows smart ones or something)?
When I run a test on the same css replacing ascii quotes with unicode character 201C, a left double quotation mark, the space is removed. The reason is quite simple: the parser doesn't recognize it as a string and therefor it strips white space.
You might want to try the latest version from here http://yuilibrary.com/download/yuicompressor/ anyway. In case your current version is installed using some package manager: just extract the .jar file from the archives 'build' folder.
You might add a margin to the content:
.author-name:before {
content: "by:";
margin: 0 .35em 0 0;
}
Related
I am using recess (https://github.com/twitter/recess) to compress the CSS file
div {
color: red
border: 1px solid red
}
p {
color: blue
}
# recess test.css --compress (No output)
As you can see, there is missing colon in the CSS file so recess failed to output anything, but in a real browser it is perfactly ok if only part of the CSS contains error
e.g.
http://jsfiddle.net/VDQLU/ (see the bule color in p, not affecting by error above)
Q. Are there any way to compress the file anyway with recess? Or using other tool?
The reason recess fails, is because that is invalid css. (You probably know that). And the reason it works anyway on the browser you use, is because browsers assume some web developers just wont use correct syntax and also they want to be compatible with legacy websites, not because the semicolons are optional on css, or because css parsers are supposed to have a quirks mode!.
I would use a sed line to clean the css file, and from now on, use correct css code. Here is an example sed line: (backup your css file first!)
sed -i '/{/,/}/ { /[}{]/ !{ /\/\*.*[^(\*\/\t )][\t ]*$/,/\*\// !{ s/\([^(\*\/);\t ]\)[\t ]*$/\1;/ }}}' yourcssfile.css
This sed line will:
Add ;, only to the lines that end without semicolons; that is, if you do have some lines that end with semicolons, you wont end with two semicolons one after another (like ;;)
Check also for commented lines, be on one line like: /* some comment */, or multiple lines.
That does NOT mean the change is automagically done flawlessly; you would probably have to do some manual fixing (and perhaps manual hacking the sed line), but if your css file looks like your example, it should work almost perfect.
Any sort of CSS compression will remove line breaks from your CSS.
Though a browser may understand your code now, without line breaks to help it process the incorrect code, it would just have a single string.
Any compressor that did compress that code wouldn't be doing you any favours as it almost certainly wouldn't be understood by any browser once the line breaks were removed.
Please use the div style like this.
div {color: red;border:solid red;}
its a good solution for your result.
I'm working with a friend on a project with a huge CSS file.
There is a lot of duplication like:
h1 {
color : black;
}
h1 {
color : blue;
width: 30px;
}
The first h1 can be removed, because it will never be used, because fully rewrited by the second. (because it is in the same CSS file)
I would know if it exists a tool that factorizes (and compress) this kind of stuff.
To only have at the end:
h1 {color:blue;width:30px}
PS: If it can be an online tool, it will be perfect!
There's a nice one in ruby: http://zmoazeni.github.io/csscss
In node.js: https://github.com/rbtech/css-purge
Both are very easy to use from command line.
This is also a nice once: http://cssmerge.sourceforge.net
And a plugin for Firefox: https://addons.mozilla.org/en-us/firefox/addon/css-usage
First you can try
CSS usage checker
Then Try these
CSS Compressor
Javascript Compressor
If you are using Firefox, you can use this addon which will help you achieve it.
https://addons.mozilla.org/en-us/firefox/addon/css-usage/
It creates a new css which tells you only used rules and sideline unused one. It also lets you export that css.
#page { #top-right { content: "Page " counter(page) " of " counter(pages); } }
This is the only way i found to display the page numbers as 'Page 5 of 10' for example. However it does not seem to be working. I tried it in a simple HTML page but it didn't work.
I want to display the page number any where in the page using plain html/css.
Did anyone succeed to make it work? If so, I appreciate your support.
You quote a (by and large correct) CSS snippet to create PDF- and print output ("paged media") from HTML input, but you say: "it does not seem to be working".
Then, two sentences further down, you say: "I want to display the page number any where in the page".
First, point two.
There is no way to put the page numbers into the HTML website itself. This feature is only for paged media, such as PDF or print output created from the HTML.
So, it's only for PDF or print output. But even there: there's also no way to put the page numbers on the PDF or print page at arbitrary positions. Your only choices are the top- and bottom -left/-right/-center margin boxes, nowhere on the main page.
Second, point one.
Now for putting the page number info into these spots where they are possible...
Since you do not elaborate what exactly does not work with your setup, let me give you a rundown:
Create a file my.css and put the following content into it (it's not the minimum required by your question, but adds a few more goodies for you to experiment with).
Also, at first I'll explain how to use it with PrinceXML.
#page { size: A4 landscape;
background: gray;
border: solid 1pt blue;
padding: 9pt;
margin: 18pt 18pt 18pt 18pt;
font-family: "Helvetica Narrow";
#top-left {
content: 'PrivateCopy';
color: red;
font-style: bolditalic;
}
#top {
content: string(doctitle);
}
#bottom-left {
content: 'My Super-Duper Manual';
font-style: bold;
}
#top-right {
content: "Page " counter(page) " of " counter(pages);
font-style: bold;
}
#bottom {
content: string(paratitle);
}
}
Save the file somewhere on your disk.
Now call the PrinceXML commandline and use -s my.css to apply the style sheet:
prince \
--verbose \
--javascript \
--style=/path/to/my.css \
http://stackoverflow.com/questions/12061835/css-page-counter \
--output=my-css-page-counter-question.pdf
(Obviously, you need to adapt your path to the my.css stylesheet file. But then...) Voila!, your Stackoverflow question in a PDF...
Of course you can extend my.css with many more features. And of course, you can use it for any conversion of HTML files, even local ones mixed with remote ones:
prince \
--verbose \
--javascript \
-s /path/to/my.css \
/home/nada.adly/Documents/title.html \
/home/nada.adly/Documents/chapter_1.html \
/home/nada.adly/Documents/chapter_2.html \
http://en.wikipedia.org/wiki/Cascading_Style_Sheets \
http://stackoverflow.com/questions/tagged/css \
-o random.pdf
Now for using CSS aside from and without PrinceXML, and for direct print output. (Of course you can always print the PDF generated by PrinceXML -- but maybe you don't want to use Prince at all?)
Again, you are not clear about the scope of your question:
Do you as a browser user want to get these page numbers into any website printout you may do?
Or do you as a webmaster responsible for a website want to make sure that these page numbers get in into the printouts your website visitors do from your content?
I'll not elaborate any of these two points here (since I may be completely missing your point), but...
...you should google for 'User Style Sheets' and for 'print.css' to find out where exactly to store this CSS code (because user style sheet locations are different from browser to browser);
...the CSS code is the same for any one of the two purposes (webmaster's style sheet or user style sheet).
This works only when HTML page is printed.
Try to print or save your HTML page as .xps . You will see the page numbers.
If you are using Prince, all will work fine and you can safely rely on the newest CSS3 standards which will allow you to produce print-quality PDFs.
If you are not using prince, you are out of luck. There are multiple options for working around, but none of the really do the job.
#page { anything }
is close to useless in the browser world when it comes to pagination. It seems fine for some margins in some browsers.
Another problem is the missing implementation of margin-box like "#top-right". None of the browser I tested even heard of them :-) Again, Prince knows them all.
Chrome doesn't use the whole #page approach and has a checkbox in the chrome-print dialog, which allows you to embed very crude pagination ("1/2"). It is not configurable in any way and completely ignores any page number related css.
Firefox is a much better candidate, at least there is a vaild workaround, but the problem here is, that the counters(pages) is always zero. So if you want to show the amount of total pages, this approach leads nowhere.
For browsers, it will utlimately boil down to the used HTML/CSS rendering engine. All libraries, stand-alone solutions and embedded browser rely on the underlying renderer and if the feature is not or badly support, the framework can'T do anything about it (like awesomoium, cefsharp etc.).
If you are printing using a browser, not many browsers (as of December 2013) support all of the CSS Paged Media specification. On the whole, you are usually pretty sure of getting page-breaks supported, but headers and footers don't work in any browser I have tested.
However, if I print using PrinceXML, it works fine:
"C:\...\prince.exe" http://localhost/Test/ -o C:\Pdf\prince.pdf
I get all my headers and footers, page numbers, dynamic content.
You'll find that more and more browsers / rendering engines will add full support as the specification matures.
Using PHPStorm 3.0:
Is there a way to tame auto-completion in css files?
I've disabled everything in "Preferences > Editor > Code Completion", yet I still observe the following behavior:
Say I'd try to type
.list {
}
When typeing ".list" and pressing the space key to add a { bracket, PHPStorm automatically expands .list to
.list-style-type:
;
This happens with almost every other word that also occurs as a css property even in comments
Any ideas on how to stop this without altering PHP/JS auto complete behavior?
It seems you set Space shortcut for live template expanding (Settings | Live templates). If so, this behaviour is by design.
Go to Editor > General > Code Completion.
Uncheck Insert selected variant by typing dot, space, ect.
After doing this, your example of .list { will no longer insert .list-style-type: when pressing space before the {.
Eric Meyer's advice to keep individual rules alphabetized in a CSS style definition makes sense - there's no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don't define the same thing twice.
div.Foo
{
background:Green;
border:1px solid Khaki;
display:none;
left:225px;
max-height:300px;
overflow-x:hidden;
overflow-y:auto;
position:absolute;
top:0;
width:230px;
z-index:99;
}
So my question: Is there a plugin or some other easy way to select a list of rules in Visual Studio and alphabetize them? (Better yet, to apply this throughout a stylesheet in one fell swoop.)
Update
#Geoff suggests CleanCSS, which is very cool and will do the above-requested alphabetization all at once, in addition to a lot of other nice clean-up (e.g. merging definitions with the same selector). Unfortunately it collapses multiple selectors in a definition into a single line. For example
div.Foo,
div.Foo p,
div.Foo li
{
color:Green;
}
becomes
div.Foo,div.Foo p,div.Foo li
{
color:Green;
}
which is much harder to read and kind of a deal-breaker. This is with the lowest compression setting, and I don't see a way to override it.
Ben's answer is correct but is error prone but lead me to this plugin:
https://github.com/mrmlnc/vscode-postcss-sorting
Simply add this to your settings.json after installing,
"postcssSorting.config": {
"properties-order": "alphabetical"
}
Then in the vscode command panel (cmd+shift+p) choose PostCSS Sorting: Run
There's lot of other great config options too including how to handle comments.
I don't know of anything in visual studio, but there online tools to clean up and format css. I've used CleanCSS with success
Update:
Try this one Format CSS Online. It seems to output the lines more like you want
In fact it's much more simple and you do not have to install any plugin.
Just go File > Preferences > Keyboard Shortcuts
Then Type Sort lines ascending, then map a keybinding to that.
Use CodeMaid. Ctrl+M+F9 will sort any text in your selection, regardless of type.
In 2021, I found this extension that does the job perfectly ; It also can sort any blocks codes in others languages: https://marketplace.visualstudio.com/items?itemName=1nVitr0.blocksort
Important note: You must first group the selectors on a single line, otherwise the plugin will not understand that they go together. For example:
// Don't do this
.rule1,
.rule2 {
color: red;
}
// Do that
.rule1, .rule2 {
color: red;
}
In VSCode. Just attach a key binding to the
“Sort Lines Alphabetically” command.
File > Preferences > Keyboard Shortcuts
Type “sort lines” in the search box and add a keybinding to Sort Lines Alphabetically. For example Ctrl+Cmd+O.
However you need to be careful with your formatting as this feature is not smart enough to move css properties that are wrapped to multiple lines.
There's a VSCode plugin called CSS Alphabetize that should allow you to do this.
Disclaimer: I'm the author. Not trying to plug it, just happened to come across this article.
https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize
It's not a plugin and it doesn't know about CSS but it's often helpful: a spreadsheet such as Excel or Google Spreadsheets.
I often cut code, paste it into Excel, munge it a bit, and paste it back into my editor. I find this technique especially useful for quick alphabetizing.