I use Chrome browser notifications in my application and want to build chrome notification preview(how it will looks in browser) before delivering.
Where I may look css styles for browser notifications(esp. font-family and font-size)?
You should refeer to this documentation on styling Chrome Notifications.
BTW i don't think you could apply css styles to google chrome web notification system.
Related
I'm using SVG sprite and referencing fragment identifiers in it for CSS background image. The CSS code looks like this: background: url(sprite.svg#icon-1);.
It works on Firefox/Win7, Google Chrome/Win7, IE11/Win7, IE10/Win8, Firefox/Android 4.4.2, and Google Chrome/Android 4.4.2. However, it does not work on iOS 9.3.4.
Here is a demonstration on Plunker. (And here is a shorter url for easier accesses for mobile devices: goo.gl/P9xG4E)
Is it possible to get iOS working with this method?
== Update ==On Android 4.4.2, unlike Firefox and Google Chrome, the built-in Android browser does not support the feature.
Can I Use tells us that this is not supported on Safari (Mac or iOS).
Also note that it wasn't supported on Android browser up to 4.4.4, which are still quite common, and some other browsers have limitations.
I found a polyfill which fixes WebKit browsers' this issue. And it works for me.
Please check its demonstration for implementation.
Is Phonegap capable of converting all CSS3 transitions or should we avoid some of them?
Phonegap uses a Webview to display your page.
in most devices the Webview uses webkit to render pages. So what ever works in other webkit browsers (Google chrome, for example), should work with phonegap.
read more here:
http://docs.phonegap.com/en/4.0.0/guide_hybrid_webviews_index.md.html
You should check every CSS and javascript feature you want to use on http://caniuse.com/
You should check the columns iOS Safari for iOS apps and Android Browser for android apps (not chrome for android, because it usually has better support than Android Browser and the android webview is based on the Android Browser, not on chrome)
A client of mine just sent in a screenshot that one of his staff members took, with the formatting of their website totally broken.
If he were in IE7 I'd understand, but it looks like the screenshot was sent was of an iE9+ browser.
Anyone know what might be going on? it doesn't look like the compatibility mode is clicked in, shouldn't CSS3 be rendering correctly on this browser?
Screenshot looks like IE8. You can reference this site for CSS compatibility: http://caniuse.com/
For CSS3 compatibility with IE7 or IE8, you can use a JS to 'mimic' some properties. More information here: https://code.google.com/p/ie7-js/
I'm working with a custom app that doesn't allow classes to be applied to the tag and the original CSS we were working with uses this methodology. Instead, the app requires an individual CSS file for each browser (lame, I know).
Our company has a sample page that has the working code applied with browser specific overrides placed on the HTML tag. So, what I'd like to do is load up the page in each version of IE and see what specific CSS is actually applied, then just upload each CSS file to the app. Does anyone know a tool that will do that?
Note, I did find this: How can I see which styles in my stylesheet are actually being applied to the current page?
But the answers were for firefox. :(
If you press F12 in Internet Explorer it will bring up Developer Tools.
From here you can inspect the HTML/CSS and see the specific CSS rules applied.
With these tools you can then change the browser mode Internet Explorer runs in e.g. If you are using IE9 you can set it to run in IE9 Compatibility Mode, IE9, IE8, IE7.
You can also change the document mode IE9 Standards, IE8 Standards, IE7 Standards and Quirks mode.
EDIT : You could try http://unused-css.com/
I have an ASP.NET page where I need to figure out where the style for a textbox is coming from. There are several style sheets defined for the page and I want to be able to use some sort of tool / editor that will tell me what styles were used and from what file(s) to render the textbox.
Thank you.
Use Firefox with Firebug and inspect the Text-box. Firebug is the most useful tool to do exactly that.
In IE you can use the IE Developer Toolbar. But I'm a fan of FireBug for FireFox.
From comments: Bernard Chhun recommended FireBug Lite as an alternative to IE Dev Toolbar. It also works for Opera and Safari too.
Most browsers have developer tools (build-in or as extension) that can show you the cascading order of the applied rules.
For Firefox there is the Firebug extension, Safari (WebKit) has Web Inspector, Opera has Dragonfly and for the Internet Explorer there is the Internet Explorer Developer Toolbar.
The web developer toolbar for Firefox has CSS and element inspectors which I find very useful.
You can also modify the CSS in the browser so you can tweak layout without going back to your IDE