modisposition

A quick one about this technique quite common in Flash sites but rarely seen on Web. Have a look at the example first so you can understand what I am talking about ... got it ? What Is This About Let's say we have a background, a big massive graphic background surely not suitable for mobile phones, due data roaming, but maybe cool for desktop and fast ADSL. The background-size CSS property is able to let us decide if the image used as background should fit the whole element or only a portion of it. In this case the image should fit, by default, the whole height of the document with an auto width in order to let the browser adjust the scale. A differential scrolling is visible the moment we scroll the page ... please resize the window into a smaller one if you are in an HD monitor and start scrolling the page. At the very beginning, the default height of the image is 100%, as body background, and with some padding in order to let space for few important image parts such the header...

Who does not know CSS 2.1? ... silence (maybe) ... Good, so who does not know the CSS 2.1 position property ? ... silence (still maybe though) ... Excellent! Finally, who would like to use in a lightweight, cross-browser, unobtrusive way, without JavaScript dependencies, the property fixed ? ... silence again, but this time I can spot a different expression in your face ... Common Browsers With position:fixed Support Chrome Firefox Internet Explorer 7 and 8 but NOT in quirks mode Opera Safari Common Browsers WithOut position:fixed Support Internet Explorer 6 Internet Explorer 7 and 8 in quirks mode WebKit for Android WebKit for iPhone To Quirks Or Not To Quirks For backward compatibility reasons IE let developers choose between two box models ... Our loved bloody 64 years * old browser Internet Explorer 6 has never supported such property while both Internet Explorer 7 and 8 do nt support it if we are in quirks mode, a modality tendentiously dead thanks to new simple HTML 5 doctype de...

Update - Now We Do Right Thanks everybody for your tests and contributions. For those interested about why we were doing wrong please read both post and comments but for those just interested about the best way so far to serve correctly one or more font-face, this is the hack: @font-face { // define the font name to use later as font-family font-family: "uni05_53"; // define the font for IE which totally ignores local() directive src: url(../font/uni05/uni05_53.eot); // use local to let IE jump this line and // redefine the src for this font in order to let // other clever browser download *only* this font rather than 2 src: local("uni05_53"), url(../font/uni05/uni05_53.ttf) format("truetype"); } You can test directly this technique in my HTML5 Prime Directives Test Page Credits Paul Irish for its Bulletproof @font-face syntax Mikuso, comments, for his suggestions about server configurations, instantly followed by Weston...

Hi everybody! I am definitively back in London: completely tanned, thanks to Ancona holidays, but right now under the rain (OK, in this second it's sunny here...) This is a quick " here I am again " but with a simple and little present: Easy CSS Reset Creator Sometimes we need to reset CSS to be sure that our document will be clear and hopefully equal for each browser, respecting our rules rather than browsers default. To better understand what I am talking about, please have a look into this Eric A. and Kathryn S. Meyer page , the basis used to create my simple tool. What Eric did not think about, is that thanks to Web 2.0 injections and flexibilities, it could be useful to reset a single node and everything contained rather than a full document, specially when we need quick improvements or our cool widget/gadget to add somewhere in the page without an iframe or inherited rules. So, this is the page able to create the CSS you need with or without a parent rule. If you...

Mainly to work, also to investigate some good old DOS feature, I created a batch file able to make YUI Compressor more portable and easy for every Windows based client/server developer. I wrote the story, and I described each file, plus I added a workable Zip with everything you need to understand what I have created and use it, starting with a double click into a projects/vice-versa.bat file which aim is to create from a list of files a unique YUI Compressed one. Here is the link , the rest is up to you (comments, questions, suggestions, etc)

Update I completely re-wrote the test suite. You can check a live example here where results are compared with Sizzle selector engine against the common W3C page. After this Ajaxian post and some opinion exchange in its comments, I decided to extract the css2xpath function I used inside experiments in vice-versa project , creating a separated project specific for this purpose that some how could be interesting or useful. Bugs, problems, questions, and helps are more than welcome, so far I focused my attention to SlickSpeed test selectors and nothing else but at least for that it seems to be stable and reliable.

I am putting some effort to make vice-versa project a good, production ready, alternative against common libraries, and since these days I am working hard with XML, XSL(T), and XPath I decided to try an experiment implementing CSS to XPath translator for FireFox 3.0 With version 3.1 we will have querySelector and querySelectorAll but version 3.0 is still the most used one, FireFox speaking! The nightly build of vice-versa introduces a new file, mainly used for personal experiments via vice-versa library and the first experiment is an improved document.query for those browsers with document.evaluate support without document.querySelectorAll . Unfortunately Internet Explorer SlickSpeed Selector Speed Test comparing latest version of each library such Dojo , DOMAssistant , Sizzle (congrats for the new site!), Sly , and finally vice-versa project. Here the summary, from faster to slower: vice-versa 760ms Dojo 1.3.1 868ms (2 tests failed) DOMAssistant 880ms (good stuff Robert!)...

How many times we have seen an included JavaScript apparently incomprehensible? These examples could explain better what I mean: packed.it via MyMin eval((function(M,i,n){return '0("1");'.replace(/\w+/g,function(m){return (n[m]!=i[m]&&i[m])||(i[m]=M[parseInt(m,36)])})})('alert.test'.split('.'),{},Object.prototype)) Dean Edwards packer eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--)d[c]=k[c]||c;k=[(function(e){return d[e]})];e=(function(){return'\w+'});c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('1('0');',2,2,'test|alert'.split('|'),0,{})) These are only two parsers which aim is to reduce code size using an inline decompression technique that is able to evaluate source code after common keywords replacement. Basis of portable and packed code The main goal of these services is to compress a source...

... or, to be honest, that's what it's gonna do in few days, but PHP version is out ! You can find every information about server side version of packed it directly in this page . I am not joking when I said that packed.it is probably the fastest optimized client files server you can find over the net, even with an uncompiled program language like PHP. The key is the JOT compiler, compile one time, serve all the time without paranoia, saving bandwidth for both server and client, avoiding the usage of gz handlers, avoiding runtime compression, avoiding whathever you want, and finally, having the possibility to serve js, css, or both with a single file. Discover by yourself how long server need to serve, for example, jQuery ... less than one millisecond without louds of requests ... please look at X-Served-In header, if you do not trust me :P What's new? You do not need to pass in packed.it site to compile your projects, you can just serve and compile them directly from yo...

Don't You trust me? It's so diabolically simple with packed.it ... and more than a professional Web Developer complained about " why on heart noone talk about that service " :D It's not packer, it's not YUICompressor, It's the only one that cache both CSS and JavaScript in a single file ... it's for PHP4, PHP5, Python wsgi, Python psp, C#.NET ... so, what are you waiting for? Ok, I'll let you try this full package: jQuery 1.2.3 and jQuery UI 1.5b with full Flora Theme included . Enjoy ;) P.S. jQueryUI.html example file calls jQueryUI.php, jut change estension in your server if you want python or .NET

I am sorry for last days while packed.it wasn't working as expected because of new server. It seems to be faster than precedent one so thank you again Daniele , I'll write your link as soon as I can :-) Enjoy both JavaScript and CSS compressed files in a single one, enjoy packed.it!

I didn't find a way to create a clean video, probably 450 pixels are not enought to show how does packed.it work? However, I'll try to explain these two screencast. First one - Ext JS Home Page - from 223Kb to 52Kb This video shows a saved version of Ext JS Home Page . This site uses a lot of external CSS, one imported and one in page but not every one is used by JavaScript disabled browsers. Total CSS size is about 93,2Kb while 4 used JavaScript files size is about 130Kb. With packed.it You can create a project using both CSS and JavaScript and the result will be a single file with total size of 52Kb, including both CSS and JavaScript. I didn't add to project Google Analytics unrich.js file but this should be included without problems too saving other 15Kb. As You can see (I hope), the result is even smaller on page, just three tags, using IE5 compatibility one, instead of 8 inside page ... these are few bytes less than original and layout is even more clean than ever. CS...

packed.it service now creates archives with 3 types of automatic content generator: ASP.NET (C#) , PHP (4 or 5) and Python (mod_python and psp or WSGI version). These generators complete packed.it service and are usable with MyMin produced code too if You choose to manage your own projects by yourself. Probably there will be future implementations (Java, Perl, Ruby), however today You can use packed.it to create optimized CSS and JavaScript for more than 80% of hosting solutions. A special thanks to Cristian Carlesso for C# porting, He doesn't like my revision style so much ... but it works perfectly and it's more simple to mantain too (at least for me :D) Have fun with packed.it :-)

I've just uploaded last version of MyMin project fixing only JSmin problems with regular expressions when it's not inside a closure, not after '{' or ';' allowing them to parse entire jQuery UI, for example, without problems. This fix has been successfully tested on Python 2.5, PHP 5.2, C# 2 and JavaScript 1.3 You can find MyMin project description in this page while You can optimize CSS and JavaScript in a single file simply using my on-line packed.it service . Have fun with optimizations and please feel free to post a comment if You find some bug using MyMin project, Thank You!

Update It seems I found a valid fix for "strange" regular expressions. I suppose MyMin will be available tomorrow while packed.it has been just updated with last client version. Have fun with packed.it and please tell me if some source cannot be parsed. -------------------------------------- While I was testing every kind of source and CSS with my last creation, packed.it , I found a bug on JSmin logic, partially recoded inside MyMin project as JavaScript minifier (MyMinCSS and MyMinCompressor seem to work perfectly). This bug seems to be present on every version linked in JSmin page . I found this bug parsing jQuery UI + every CSS with my new service but one JavaScript file has one single, simple problem: function(){return /reg exp with this ' char/;} Bye bye JSmin, regexp will be parsed as string and an error will be raised. The problem is reproducible just with a string that contains only this (so a source that begins and end with these 3 chars): /'/ that's a...

I'm pleased to announce my last revolutionary project called packed.it ! Just another minifier packer alternative ??? No guys! packed.it goals is to reduce using best practices both CSS and JavaScript sources in a single file . You can write directly on JS area or in CSS one or upload one or more file, choosing which one should be executed before others. Based on MyMin project , a personal revisit of JSmin plus a dedicated compressor and a CSS minifier for C# , JavaScript , PHP or Python languages, packed.it creates a project archive, in zip format, that will contain everything You need to server your files gzipped, deflated or clear for browsers or robots that does not support gz pages. Not only JavaScript ! The innovative packed.it idea is to process both JavaScript and CSS to create a single project file just compiled to be served using gzip, deflate or clear text. In this case your server will not need to do anything, just serve correct file verifying its sha1 summary to ...