I have a stylesheet, which is essentially the following:
.mainwindow {
.popup {
background: black;
}
}
#media screen and (max-width: 640px){
.mainwindow {
.popup {
background: red;
}
}
}
It works perfectly in Firefox, IE and Edge, but not in Chrome, Brave or Electron.
Yes, I tried to clear the browser cache. It didn't help.
To add to the mystery, in Electron the red background flashes for a split second when starting up, then it turns to black.
Do you have this in the head
<meta name="viewport" content="width=device-width,initial-scale=1">
Otherwise if you are zoomed in that can stop responsive behaviour
Related
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
I use the following media query to apply my CSS overrides in fullscreen mode:
#media (device-width: 100vw) and (device-height: 100vh) {
.content {
padding: 0px !important;
}
}
In works perfectly in Firefox but very unreliable in Chrome (both latest versions on Windows 7 x64). I can try to apply my overrides only when not in fullscreen mode but need to invert the query. So my questions are:
Should Chrome support the query?
How do I negate it (logical not)?
p.s.
My viewport is declared like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Use new css features display-mode
#media all and (display-mode: fullscreen) {
.content {
padding: 0px;
}
}
Also avoid using !important as it's a bad practice
You can negate #media rules with not. Details on this can be found here.
It might be less elegant, but more robust, to listen to the full screen event, then perhaps add an is-fullscreen class to the body so you can write your rule like this:
body.is-fullscreen .content { padding...
For example:
document.addEventListener('fullscreenchange', function() {
document.body.classList.toggle('is-fullscreen', document.fullscreenEnabled);
});
This event has vendor-prefixed versions, so make sure you're using the one(s) you need.
I am trying to design a website that will responsively display either the desktop version or the mobile version depending on the user's device. I prefer to do this with responsive CSS as opposed to a mobile redirect.
The website in question is http://www.raceweekend.com. When the browser window is resized to a mobile width, the following is supposed to happen:
the horizontal menu should become vertical in red rectangle blocks
the rotating image should disappear
the logo should become centered at the top
the date (next to the logo) should disappear
The CSS behaves exactly how I want it to in both IE9 and Firefox. When I resize the window to be narrow enough, all of the above items happen.
On mobile, it just shows the regular browser version; none of the above items happen. I tested on an iPhone 4 and a Samsung Galaxy Nexus.
Here is my media query code:
#media handheld, screen and (max-width: 480px) {
#nav-bar {
display:none;
}
#header {
height:auto !important;
width:100% !important;
}
#nav {
height:auto !important;
}
.main-nav li {
float:none !important;
clear:both;
background-color:#cf171f;
margin-bottom:1px !important;
padding:0 !important;
}
.main-nav li a{
display:block;
padding:10px 18px;
}
.main-nav li a:hover{
background-color:#be161d;
color:#ffffff !important;
}
#date {
display:none;
}
#race-logo {
width: 100% !important;
}
.center {
margin: 0px auto;
display: block;
}
#content, #content-sliders {
margin-left:5% !important;
width: 90% !important;
padding-top:20px !important;
}
#footer {
font-size:14px !important;
line-height:1.5em;
}
}
Try using meta tags to force the mobile browser to report it's actual width:
<meta name="viewport" content="width=device-width" />
You could also disable zooming if you've got an appropriate responsive design:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
You need to add the viewport meta tag to your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
By default, an iPhone will in fact render sites as if its viewport were 980px wide, then scale them down to fit its actual width. This is because an iPhone's true viewport width is 480px (a literal 480px on an iPhone 3GS or earlier, or a "logical" 480px on a double-resolution iPhone 4 retina display), and so if it didn't do this, you'd only see a 480px-wide slice of every site you visited.
Confused yet? Go to, say, NYTimes.com on a desktop browser and resize the window to 480px wide. That's how the site would render on an iPhone if it didn't report its viewport width as 980px by default.
Anyway, that's why your media query doesn't work. So, adding the above meta tag will tell the iPhone to report its width as its actual width (480px), and that will then match the condition in your media query.
I'm facing some layout issues with a print stylesheet in webkit-based browsers, and I was wondering if there was a CSS selector, or another way to do a CSS hack to only target webkit / media print?
The classical webkit-min-device-pixel-ratio media query selector isn't working for printing.
So what's the printing equivalent to this CSS Hack? (changing the media to print, isn't working):
#media screen and (-webkit-min-device-pixel-ratio:0) {
}
You could use javascript to load CSS files for WebKit browsers only.
<head>
<link rel="stylesheet" id="hacks"/>
<script>
if(navigator.userAgent.indexOf("WebKit") != -1) {
document.getElementById("hacks").href="hacks.css";
}
</script>
</head>
You could include a stylesheet that will only be used for webkit browsers like so:
#media print and (-webkit-min-device-pixel-ratio:0) {
.black {
color:black;
}
}
There are similar features in other browsers.
Use webkit-any-link instead:
#media print
{
* > /**/ #foo, x:-webkit-any-link { padding-top: 200px; }
}
The * > /**/ selector is used to filter IE7, and can be removed if it's unsupported:
#media print
{
#foo, x:-webkit-any-link { padding-top: 200px; }
}
References
Issues for Level 4 [CSS Working Group Wiki]
CSS Selectors Level 4: The Path to CSS4
Reveal New Window Links and Links to Non HTML Files with a User Stylesheet
I'm solving one task and I need to create a piece of CSS what would apply only in Safari, NOT the other WebKit browser (mustn't apply in Chrome, f.e.). Please, could anyone toss in some ideas?
Updated info due to changes in web development since this was asked and HTML5 has become the new standard:
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
These worked great for Safari 2-3 but not newer safari versions which came later. They also required a more descriptive doctype/html spec. Here is the previous standard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5 removes this however with the plain and rather basic:
<!DOCTYPE html>
<html>
Other ways to target only Safari, and not Chrome/Opera, and works in HTML5:
This one still works properly with Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.
So then -- here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* Safari 10.1+ (which is the latest version of Safari at this time) */
#media not all and (min-resolution:.001dpcm) { #media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Try this one if SCSS or other tool set has trouble with the nested media query:
/* Safari 10.1+ (alternate method) */
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)
<style type="text/css">
/* Safari 6.1-10.0 [not 10.1+] */
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { #media
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
/* Safari 6.1-7.0 */
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
</style>
These combination css hacks are actually new as of this posting, I hope people find it handy. Meaning that I crafted these myself with many hours of testing and preparation so while you may have seen parts of them that look familiar out there, this was not copied from any site in this form but modified personally by myself to achieve this result. At the time of this posting Safari is in version 8 and Chrome is in version 37.
Please be aware that if you are using an iOS device, (tested on iOS 7 & 8 platforms) Chrome renders as Safari since it uses the built-in Safari engine. It is not 'Chrome' at all from what I can see, but Safari with a different look. Chrome hacks do not affect it, only the Safari ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
And to see it work:
<div class="safari_only">
Only Safari shows up in blue on gray here.
</div>
Live test page for this and many more CSS browser-specific hacks I have worked on:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari OR https://browserstrangeness.github.io/css_hacks.html#safari
You might be best off changing that particular property with javascript that verifies what browser you're on .
Otherwise one of the other questions pointed to this. It lets you specify CSS properties on a per-browser basis, also using javascript.
One of these should work:
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }