I am creating an application for the samsung smart tv. The problem I am facing rite now is with the emulator version 2.5. This emulator version is using the maple browser and I have checked and found out that Maple browser is not using the CSS 'background-size' property. Can somebody please tell me how I can use this size property for Maple? I don't want to use the image tag in my application.
Thanx
I'd suggest using a javascript based equivalent since that browser doesn't support CSS3 as far as I can see.
Here's a couple of examples:
http://louisremi.github.com/jquery.backgroundSize.js/demo/
http://nooshu.com/jquery-plug-in-scalable-background-image
You can use javascript solution as #BillyMoat mention - but in my opinion the best way is to use normal img tag as SmartTVs have very limited performance.
Adding to much JavaScript operations on DOM can just hang your application.
Related
After a long time i got a new project, where i'm going to implement the RWD. Before getting project i was talking a lot the RWD, but when it comes to writing the code, i see lot of confusion. I really need your suggestions and ideas for proceeding further.
Here are my questions:
How to support support media queries stuff to the older versions of browser(ie6 ie7 ie8 etc) or what is the alternative way to do it.
Do i need to use the flexible layout within the fixed main layout (like percentage based widths)
What about using the Boilerplate or bootstrap etc which supports for fallback version also
What about using modernizer?
i recommend if you are stuck please look at conditionizr http://conditionizr.com/
for more information on media queries go here http://css-tricks.com/css-media-queries/
Is there a way to make sure your CSS is cross-browser capable?
I tend to work with strict doctypes, which solves a lot of problems.
Study http://www.quirksmode.org/ by Peter-Paul Koch
I refer to this site all the time.
However, as Ernest Friedman-Hill wisely pointed out, testing...
No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
Here are a few tips:
Try not to use CSS3 (yet).
Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Use a CSS reset, like http://meyerweb.com/eric/tools/css/reset/
There are a few ways to do that.
First you will want to check on a few browsers when you are done with your website. Some good options to do that is Adobe Browser application, another is browsershots.com and you can find others.
Another great rule of thumb is to use an established framework that is already cross-browser (my favorite being 52framework at http://52framework.com ).
And honestly after years of writing CSS it seems that you will just get use to writing the best possible CSS and you will have cross-browser code of the get go.
There really is no sure way to write perfect CSS first time around (there are validators out there that can help a little, Dreamweaver has a specific tool that will validate code and CSS and let you know if its capable or not.
Good luck!
Your best option is to test in each of the browsers you want to support. If you don't have access to all the browsers there are for-pay web sites that will take screen shots of your site using different browsers:
http://browsershots.org/
Did you mean "capable" or "compatible"?
Anyway, I always use the W3C CSS Validation Service. It checks your CSS to make sure it is valid. After passing this validator, chances are your CSS is cross-browser compatible. But I would recommend also manually inspecting your CSS in different browsers. Do check out http://www.css3.info/ for details on how different browsers implement different features of CSS 3.
I would also recommend you install the Web Developer Toolbar if you're planning on doing heavy web development. Great tool for Firefox and Chrome.
Just started using this technique and am having strange results on the PC side. Virtually every browser I preview this site in on a PC makes the font look totally horsey. Example:
On the Mac:
http://dropbox.smallparade.com/howto-mac.png
On a PC:
http://dropbox.smallparade.com/howto-pc.png
Anyone have experience with this issue? Is there a resolution? Does it have anything to do with how the fonts were created? Appreciate any help I can get. I used the font-face generator over at fontsquirrel.com.
That's a Hinting problem.
When you generate your font-face kit (like in FontSquirrel), you need to specify Hinting on the Expert options.
Choose Expert, and under Rendering, select:
Apply Hinting - Improve Win rendering.
probably you can specify font-size in px for example
font-size:11px/11px;
this might help you because i have faced same problem and i solved it like this only
I had this same issue, and just like Rinkalkumar I'd suggest specifying font-size.
But I've also found out that some fonts in some sizes simply render ugly.
So you may wanna try adjusting size few px +- just to check is this the issue.
Font face support isn't perfect yet, so if this proves to be an issue, you
may wanna try http://cufon.shoqolate.com/generate/ - it involves javascript
but has proven to be great when you want fonts render consistently across browsers/platforms.
ttfautohint will rebuild the font's hinting for you.
After all the latest news and talk about HTML5, I would like to know whether I can use HTML5 to create a website as of now. I mean, some features are supported by few browsers, while few features are not yet supported. So is it possible to create a full-fledged website at the current state?
The question is not whether you can create a full-fledged website, but whether you need its functionality to be identical in all browsers. The answer to the former question is yes. The answer to the latter question is still no.
I built a site in 100% semantic HTML5, tested only in Firefox, Chrome and Safari. When I was done, I added these three scripts and loaded it up in IE6 and IE7 - looked pixel-perfect! ok, perfect is an exaggeration. It doesn't look exactly the same, but it looks fine e.g. no broken layout parts, everything is legible and functional.
HTML5 Shiv script - Add HTML5 element support
ExplorerCanvas - Add <canvas> support
IE PNG Fix (IE6 only) - Add transparent PNG support
YMMV but these will almost certainly get you at least 90% of the way.
As with all new technologies make sure your website degrades gracefully.
So don't use the new <canvas> tag as the main part of your website, but you can provide a little widget or something(which is not necessary or part of the main content) which uses it.
Or if you use the <video> tag make sure that you have a backup Flash way of viewing the video as well(especially since the codecs supported by <video> is completely fragmented at the moment!)
Make sure that people on older/IE browsers can still see what your site is about and ensure it looks decent to them. I have to do the same thing with the CSS3 features that I make use of in my work.
I would say check your stats first..how many users are still on internet explorer and how important are those users to you. In other words if 80% of your users use a browser that doesn't support HTML5 then I would say don't do it
You sure can. I could write all the things you can do with HTML5 now, however I'll just link to a great article posted at http://html5doctor.com.
http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/
Charlie yes it's possible, but like you said some features are supported by most modern browsers, although not all of the features are supported at the moment . Take a look here: http://html5demos.com/
I'm using CSS Filters to modify images on the fly within the browser. These work perfectly in Internet Explorer, but aren't supported in Firefox.
Does anyone know what the CSS Filter equivalent for these is for Firefox? An answer that would work cross browser (Safari, WebKit, Firefox, etc.) would be preferred.
<style type="text/css">
.CSSClassName {filter:Invert;}
.CSSClassName {filter:Xray;}
.CSSClassName {filter:Gray;}
.CSSClassName {filter:FlipV;}
</style>
Update: I know Filter is an IE specific feature. Is there any kind of equivalent for any of these that is supported by Firefox?
Please check the Nihilogic Javascript Image Effect Library:
supports IE and Fx pretty well
has a lot of effects
You can find many other effects in the CVI Projects:
they are also JS based
there's a Lab to experiment
Good Luck
Could you give us a concrete example of what exactly you're trying to do? You'd probably get fewer "Your brower sux" responses and more "How about trying this different approach?" ones.
Normally CSS is used to control the look and feel of HTML content, not add effects or edit images in clever ways. What you're trying to do might be possible using javascript, but a behavior-oriented script still probably isn't very well suited for the kind of tweaking you want to do (although something like this is a fun and very inefficient adventure in CSS / JS tomfoolery).
I can't imagine a scenario when you would need the client to perform image tweaking in real-time. You could modify images server-side and simply reference these modified versions with your CSS or possibly Javascript, depending on what you're doing exactly. ImageMagick is a great little command-line tool for all the image effects you would ever need, and is pretty simple to use by itself or within the server-side language of your choice. Or if you're using PHP, I believe PHP's GD library is pretty popular.
There are no equivalents in other browsers. The closest you could get is using a graphics library like Canvas and manipulating the images in it, but you'd have to write the manipulations yourself and they'd require JavaScript.
filter is an IE-only feature -- it is not available in any other browser.
SVG filters applied to HTML content.
Only works in Firefox 3.1 and above, though I think Safari is heading in the same direction.
None that I know of. Filter was an IE only thing and I don't think any other browser has followed with similar functionality.
What is there a specific use case you need?
I'm afraid that you are pretty much out of luck with most of the cross-browser filter-type functionality. CSS alone will not allow you to do most of these things. For example, there is no way to invert an image cross-browser just using CSS. You will have to have two different copies of the image (one inverted) or you could try using Javascript or maybe go about it a completely different way, but there is no simple solution solely in CSS.
There are filters, such as Gaussian Blur et al in SVG, which is supported natively by most browsers except IE.
Pure thought experiment here, you could wrap your images in an SVG object on the fly with javascript and attempt to apply filters to them.
I doubt this would work for background images, though perhaps with alot of clever positioning it could work.
It's unlikely to be a realistic solution. If you don't want to permanently modify your source images, Rudi has the best answer, using server side tools to apply transformations on the fly (or cached for performance) will be the best cross browser solution.
This is a very very old question but css has updated to now support filters. Read more about it at
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Syntax
With a function, use the following:
filter: <filter-function> [<filter-function>]* | none
For a reference to an SVG element, use the following:
filter: url(svg-url#element-id)
Not really, and hopefully there never will be. It's not a web standard CSS feature for the reason that you're using CSS to format the webpage, not the browser itself. The day that other web designers and developers think they should style my browser how they wish and are then do so is the day I stop visiting their pages (and I say this as a front end web guy).