I developed an extension for Firefox with an option popup for preferences.
On mobile, as it doesn't open as a popup but as a new tab moz-extension://(...)/popup.html, I had to apply some specific CSS media queries.
But as you can see below, it's definitely not working.
What should I do ?
CSS page is here https://github.com/ANN-MB/LEIA/blob/master/extension%20firefox/leia.css
I solved the problem.
It wasn't about media queries but because my manifest.json looked like this :
"options_ui": {
"page": "config.html",
"browser_style": false,
"open_in_tab": true
}
It seems that when open_in_tab is set to true, the Firefox Mobile Browser opens the option page with the desktop display (don't ask me why).
So turning "open_in_tab" to false gave me the good render.
But you need #media querys for wanted solutions! Your Medium is provide an max range of size, you only need is to declare your style on diffents sizeranges:
#media(min-width:XXXpx) {
// your style here
}
for more information take a look at this: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
Related
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
I have css for print as simple as this:
#page {
#top-left {
content: "TOP SECRET";
color: red
}
#bottom-center {
content: counter(page);
font-style: italic
}
}
But the Chrome print preview and save to pdf seems not to recognize this at all. How can I correctly set the header and footer when priting?
EDIT: #page is supported by none ref
However, do I have other choice to do this. I'm not working on websites. The product wants a pdf as result only. I can accept chrome, webkit, plantomjs etc.
You can use the open tool PagedJS to render iframes or whole pages using the CSS paged-media spec. https://pagedjs.org/
This tool is a polyfill that converts blocks like the one you posted (CSS Paged Media that isn't implemented by browsers) into browser-compliant html/css.
It also has a CLI alternative that sets up puppeteer & creates PDF outputs: https://gitlab.coko.foundation/pagedjs/pagedjs-cli
Near as I can determine, CSS features for paged media are primarily for systems that render for printing, rather than systems that render for the screen (browsers) or the print feature of browsers. An example of an HTML/CSS engine for printing is Prince. So, #page won't work in a browser, nor (as far as I know) was it intended to.
I'm trying to get styles applied to a page only when the page is projected on the wall (by a projector, when someone is giving a presentation). As the moment, I can only get this in Opera in fullscreen mode.
Is there any way to get #media projection to take affect in other browsers? Also, is there a way to make it only apply to the projection, and not the laptop its projecting from?
If not, are there any viable workarounds to this? I am trying to create a slideshow in css, but also offer a "presenter view" with extra controls on the laptop of the presenter.
Any help in any surrounding area is much appreciated.
#media projection is an abstract concept. Practically projection can be 'on' only on devices of special kind with custom browser builds.
On desktop/laptop with projector attached as an external monitor there is no way for the browser to know what kind of additional monitor is used (if any) for viewing.
The only option for you is to put <button>"Fullscreen" mode</button> and to use something like:
$(button).click( function() { $(document.body).toggleClass("fullscreen") } );
And use styles:
body { ... }
body.fullsceen { ... }
If the projector's output is a different resolution than your laptop monitor, you can use a CSS media query to control the display of an extra element inside each slide, with notes for the presenter.
For example, let's say the laptop is 1024x768, the projected screen is 1280x800, and the notes are inside an element with the class name "notes" -- you'd do something like this:
.slide > .notes
{
display:none;
}
#media projection and (width:1280px)
{
.slide > .notes
{
display:block;
}
}
It would still require the projector and the laptop to be different screens (like using two monitors), but with that as a given, it totally works -- I've done this for real.
I use Opera in fullscreen mode whenever I give presentations; I also use a Mac OS X app called "Mira", which allows you to configure the Apple Remote so it sends keystrokes to applications. So mapping the "Fwd" and "Back" keys on the remote to "page-up" and "page-down" in Opera, I can use the remote to step-through the slides :-D
I have a web page with a phone number being displayed in the page header. The font color for that section of the page is brown.
When the page is viewed on an iPad, the iPad (correctly) detects the text as a phone number and automagically converts the phone number text to a "contact link".
My problem is that I am unable to FORCE the link color to be brown - regardless of what I do in the CSS file (including "! important" after the color statement), the phone number is always being displayed in it's own self-appointed color!
Any clues on how to get my CSS declaration to win the war?
It seems like ipad wraps the number in an <a>. I just added an additional rule for this:
Before:
.phone { color:red; }
After:
.phone,
.phone a { color:red; }
Have a look on this page (format-detection) ;)
Try this, it worked for me (change the color code):
a.phone[href^=tel]:link { color:#9F6; }
<meta name = "format-detection" content = "telephone=no">
Works for me. Check this for more detail.
http://developer.apple.com/library/safari/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html
(360) 687<i>-</i>8936
I have a client who is a crazy person. He wants his phone number all over the website, and in only one place does it clash with the iphone/ipad auto-linking parser.
So, adding the i tag around the dash fooled iOS into seeing it not as a phone
Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?
What about Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
when installed go to CSS -> Display CSS by media type -> Print
Newer Firefox
Open devtools with F12.
Go to Inspector tab.
Open Rules subtab.
There will be print media button.
Old firefox
Firefox does not need firebug now.
Run developer toolbar by pressing Shift+F2
Type media emulate print
Type media reset in order to return to standard view.
I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.
Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.
You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.
In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.
Actually, be aware that you might see #media print CSS when you don't expect it.
Like SO uses:
[..]#media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]
...and hence one might expect the CSS panel in Firebug to somehow show:
#media print {
#sidebar, #nav, [..], div.vote {
display: none;
}
}
But instead it shows the CSS as if the #media print is actually active, like:
#sidebar, #nav, [..], div.vote {
display: none;
}
(See also the related issue report: CSS Panel does not have #media UI.)
Edit 2 After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the #media print CSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.
With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...> and <style> tags to your convenience.
For example, you can switch an original
<link rel="stylesheet" type="text/css" media="print">
to
<link rel="stylesheet" type="text/css" media="screen">
and the browser will apply it. You'll also have to deactivate the screen-only ones.
Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.
Edit 1 This trick suggests me using javascript to automate this...
(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)
// Save all stylesheet links
allStylesheets = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');
// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
printStylesheets.attr("media", "screen");
}
Note that the default media is "screen" (w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.
As pointed out above, this solution does not work with html code like this, because the styling inside the #media print won't be applied by the browser:
<html>
<head>
<title>Hello world</title>
<style type="text/css" media="all">
#media print { h1 { color: red; }}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.
What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.
Firefox 68 added a button to "Toggle print media simulation for the page" to the Rules View of the Page Inspector (Bug 1534984):
There's a video of how to use the button in "View #media rules for Print" section of the "Examine and edit CSS" page.