Is anyone aware of a method of feeding the Kindle Fire (ebooks) a separate style-sheet? One that would not be read by iBooks (iPad)?
I am aware of the method (below) that allows you to target the old Kindle
<style type="text/css" media="amzn-mobi">
p.firstline {margin-top:20px;text-indent:-40px}
p.line {text-indent:-40px}
</style>
But I'm looking for a way of targeting Kindle Fire only.
cheers
According to the George Benthien you can use #media amzn-kf8 for Kindle Fire. Hope this helps.
Those media queries apply only to eBooks, it doesn't work for HTML.
I was looking for web solution, and resorted to device sniffing via JS.
This is what I have done with jQuery:
if( /Silk/i.test(navigator.userAgent) ) {
$('html').addClass('kindle');
}
And then in CSS:
html {font-size:143.75%; }
html.kindle{font-size:112.5%}
From what I've read Kindle/Fire uses a webkit browser so it is pretty standard compliant ( a list of supported HTML and CSS for Kindle can be found here: kindleformatting.com/book/files/KindleHTMLtags.pdf)
You could do the reverse and target Safari Mobile and make certain elements display differently in Safari Moble. (iPad)
#content { float : left; }
[if SafMob]#content { float : none; }
More information on conditional css can be found here. But I think you're out of luck on targeting the Kindle specifically, unfortunately.
Related
my safari browser version is 5.0.and my problem is how to give a css for safari browser not a chrome browser.
please, help me.Thanks
Use this. It will work only in Safari.
/* Css for Safari */
#media screen and (-webkit-min-device-pixel-ratio:0){
::i-block-chrome, .yourClassName {
background:#f00;
}
}
CSS Selector/Property/Value Hacks are imho problematic, as
preprocessors like SASS might not work with them
browsers or browser-versions they apply to, are subject to change
Therefore - if you really need to use browser-specific css - I'd recommend you to use JavaScript to set a certain class to the or tag, which is then used by a CSS Selector to style only in these desired browsers.
JS:
if(doSomeUserAgentLogic()) {
document.body.classList.add("is-safari")
}
CSS:
body.is-safari .custom-selector {
property: value;
}
Detecting the browser and certain versions using the userAgent in JavaScript is not that easy, therefore you should probably use something like https://github.com/DamonOehlman/detect-browser, but at least this way of detecting is "quite" stable.
Which browsers already support some of these attributes?
http://dev.w3.org/csswg/mediaqueries4/
This one f.e. does not work on iOS7, iPhone 4S
#media (luminosity: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
#media (luminosity: dim) {
body {
background: #e9e4e3;
}
}
#media (luminosity: washed) {
body {
background: #ffffff;
}
}
Here, on CanIUse, you can find updated and current support for many CSS properties. In this specific case, some of Level 4 Media are already supported even if in not standard way, such as:
"API for finding out whether or not a media query applies to the document"
"Method of accessing external device data (such as a webcam video stream)"
UPDATE 2022 JULY:
Chrome started supporting this feature from chrome version 104 but still Chrome for android and Safari for both iPhone and mac lacks the support.(No need to worry about IE since it support ended by Microsoft)
Now it's working at least on Firefox.
so now you can write media queries like following:
#media (width <= 30em) { ... }
no i think you cant because of the common unsupportable browsers such as firefox and opra as well as IE*!
this is some resources about it
Feature: Media Queries: interaction media features
PPK is generating some media queries support tables and has tests you can use yourself too.
The spec is still a draft, maybe try mobile Firefox as that has support for some luminocity via javascript.
MDN has per feature support tables for media queries. That seems to be the best option for this information.
maybe that problem is simple, but I have no Idea how to solve this, and also no real Idea what I should type in to google ;)
In my CSS I have the following declaration:
body { font-size: 100%; }
No, because the new high-density devices show my fonts very small, I want that declaration to be set to something like:
body { font-size: 200%; }
What is the simplest way to do this, without creating/linking additional files or doing some serverside-processing of the user agent?
Use a mobile browser detection (either server-side or client-side). You can find this at http://detectmobilebrowsers.com/. If the browser is mobile, add the class mobile to the body tag.
E.g. if you use the jQuery code from Detect Mobile Browsers:
$(document).ready(function()
{
if(jQuery.browser.mobile)
{
$('body').addClass('mobile');
}
});
Then, in your CSS, you can use body.mobile {} and .mobile .something {} to apply mobile specific styles.
A 'smart' high density phone will handle this automatically for you (such as ios devices with Retina displays). A not-so-smart one will not, but note that the user has become used to this already, so you may not want to adjust their fonts at all, as they may have already done so themselves.
html {-webkit-text-size-adjust: none;}
I'm trying to just flat out kill my responsive Web Design and CSS3 Media Queries for all IE browsers below 8, and just have the fixed, locked, layout.
I've tried, inserting 'if IE 8+ conditionals' around my media queries within my css and it was ignored. Anyone have any simple concrete methods aside from calling in a new seperate stylesheet?
How about doing feature detection with Modernizr. http://www.modernizr.com/
I would suggest combining more CSS with the rules inside the media query to shut out IE8 and below. For example (where the class "nevergonnahappen" isn't used on anything)
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.example:not(.nevergonnahappen) {
color: red;
}
}
IE8 and below will ignore the media query and execute the code, but since IE8 and below don't support ":not" the rule will not match anything and so won't be executed. Modern browsers will understand ":not", but since nothing actually has a class of "nevergonnahappen" nothing is excluded.
If you're using Modernizr you could use a feature detection class to exclude IE8 instead of the not sudoclass.
.touch .example {...}
instead of
.example:not(.nevergonnahappen) {...}
where the ".touch" class is put in for touch-screen devices.
Here are hacks discovered after you posted your question, to target specific IE versions as fallback: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
And a way here, to apparently filter for IE6/7 like this, with the IE8 ignore caveat:
#media screen and (min-width:640px), screen/9 {
body {
background: green;
}
}
"This allows all non-IE browsers to render the styles and keeps media
query support in IE9/10. It also creates a pass-through filter for
IE6/7 but we’re still stuck with IE8 ignoring the entire block".
http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/#comment-3393 by Keith Clark
The title sums it up. I'll get this out of the way and say I am aware that css hacks are dirty ugly horrible things. Sometimes dirty problems call for dirty solutions though :)
So does anyone know of a css selector hack that works for recent safari versions but is not a general webkit hack ? My site behaves properly in chrome but has a bug in safari. So if anyone knows how i can select an element to only have a certain style in safari let me know!
What I'd do, is sniff the user agent of the browser with javascript, and add a class to the <body> element, based on that. That way you don't have to rely on any kind of hack, you just write your selectors based on the class:
.safari .misbehaving-div {
}
I believe there is already a JS framework that does exactly this, but I don't remember the name.
Ended up using this:
http://rafael.adm.br/css_browser_selector/
This works perfectly
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass{
background: red;
}
/* Safari only override */
::i-block-chrome,.myClass{
background: green;
}
}