I realize this may be a dumb question because I am returning to web dev after some time anyway, so please don't be shy to enlighten me! To me it seems that the art of css hacks (like back in the day to sniff out old IE browsers) could be used to fill the gap between the new-ish #supports queries and old browsers that do not support these features. Potential to save yourself and your site from alot of javascript? Even aid in dropping javascript altogether in small projects. Is anyone aware of any projects like this? It is also possible I have failed to search with proper keywords...
Yes, you can do this with the next commands:
The all following examples are valid:
#supports not (not (transform-origin: 2px)) - for test browser on non-support
or
#supports (display: grid) - for test browser on support
or
#supports (display: grid) and (not (display: inline-grid)). - for test both
See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#supports
Related
I am doing a web application. While trying to open the webiste on UC mini browser in data saving mode from my mobile device the css styles are not getting compiled.Is there any way to debug?
Thanks in advance.
There are no very good ways to debug it. UCMini (or UCWeb in light speed mode) is a remote proxy browser. As far I know, there is no debug console for it. The only thing you can do is throw JavaScript alert()s to try and debug various JS breakage issues.
But if you are concerned about a very weird layout. Keep in mind that you will never see a normal CSS in those modes. UCMini is not a normal browser. It's a Firefox 10 proxy engine that will shrink your content into a single column, in a similar way Opera Mini does in single column view mode.
A couple good other helpful things to know about that browser's context:
The target screen size is 800x600. So in portrait, it shrinks it all to approximately 600px (in one column), and 800px in landscape. And due to the Firefox 3-10(ish) engine, CSS support is limited.
I could say about our experience (FareCompare.com). Nodejs consoles + Frontend (Dojo) alerts. That's all we could find for our few bugs.
P.S. Pay attention that UC is working in one page mode. As far as I know, it is impossible to open new tab there. window.open() works the same as location.replace( url ).
There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.
Related onclick go full screen and How to implement exact full-screen in javascript?.
Facebook has recently added the high resolution image view feature:
When I clicked it, my browser goes full screen mode:
This is native browser full screen similar to F11.
I would like to implement this feature for a local web app that will only be used internally, thus no random user being irritated by the full screen effect.
Does anybody know how to do this?
Or alternatively where I can get code to implement this, with explanation how it works?
this is a new API offered by HTML5 so only few browsers support it at the moment...
you can check MDN for some basic explanation and examples
EDIT: worth to mention > difference between Gecko and WebKit: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%"
EDIT 2: supporting browsers are only Firefox (since 10) and Chrome (I think very early not quite sure when they fully supported it)... as it is experimental you need the vendor prefixes...
EDIT 3: link to "living " spec
EDIT 4: regarding IE support: 11/15/2011 Ted Johnson from IEBlog says that the IE10 team has not yet decided whether to implement the FullScreen API. He notes however that, “Windows 8 Metro style Internet Explorer is always full screen … and as before, F11 enters full screen mode in desktop versions of IE.”
EDIT 5: can I use - another nice table showing that in latest Safari available as well... whether Opera supports it in Version 12 is still unknown
There is a new HTML5 Full Screen API.
Here is a demo site of it.
http://html5-demos.appspot.com/static/fullscreen.html
When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?
The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?
Opera has an option to view pages as through a mobile device. I've found it useful in the past.
I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.
One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.
You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.
It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.
BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.