I've added inline-inset-end and inset-inline-start to an absolutely positioned element. I'm using them for language support as these two should help when the layout needs to switch between RTL and LTR.
This is working fine on chrome and forefox but I have absolutely no idea how to set up an equivalent in Safari.
I'm trying to understand if there is a basic css alternative that will work on Safari
An example of what the layout would be like:
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
background: blue;
}
.reader {
width: 50px;
height: 100%;
display : flex;
flex-direction : column;
position: absolute;
inset-inline-end: 0px;
background: yellow;
}
<html>
<body>
<div class="container">
ha ha
<div class="reader">
hola
</div>
</div>
</body>
</html>
Safari supports inset-inline-end and inset-inline-start now (and most other logical properties), but if you still need a fallback there are options. As long as you are using the dir attribute properly, you can add a fallback that works in basically any browser.
[dir="ltr"] .reader {
right: 0px;
}
[dir="rtl"] .reader {
left: 0px;
}
If you want to go a step further (at the cost of some support), you can use #supports:
#supports not (inset-inline-end: 0px) {
[dir="ltr"] .reader {
right: 0px;
}
[dir="rtl"] .reader {
left: 0px;
}
}
The same trick can be used with most logical properties as well.
Related
I have a mix-blend-mode for one of my images that works perfectly on firefox and chrome, but not on safari. The overlay is on a CSS slider I have and I found transform messes up the mix-blend-mode property. How do I avoid having the transform interfere with the css styling.
I am using the Swiper Slider
Below I placed my code and exactly how it should look. The final result should look like this:
section {
position: relative;
will-change: opacity;
}
section::after {
background-color: #3b5873;
border: 33.325px solid #c4ae7e;
content: '';
display: block;
height: calc(100% - 66.65px);
position: absolute;
top: 0;
width: calc(100% - 66.65px);
}
.container {
background-color: #fff;
height: 100%;
width: 100%;
position: relative;
mix-blend-mode: luminosity;
z-index: 9;
}
.image-bg {
background-size: cover;
padding-top: 59.08%;
}
<section>
<div class="container">
<div class="image-bg" style="background-image:url('http://dev-thepaxton.pantheonsite.io/wp-content/themes/paxton-theme/dist/images/home/gallery_0.jpg')"></div>
</div>
</section>
Unfortunately, mix-blend-mode is not supported for Safari/WebKit SVG elements:
https://caniuse.com/#feat=mdn-css_properties_mix-blend-mode_svg
I'm using a CSS based image-map, which I want to display correctly whatever the size of the browser window. Of course there are actually multiple links.
My HTML ...
<div id="sitemap" >
<img src="img.jpg" class="center"/>
<a href="url1.html" id='id1'></a>
</div
And the CSS ...
#sitemap img{
max-width: 100vw;
max-height: 100vh;
position: relative;
}
#sitemap a {
display: block;
position: absolute;
}
#sitemap a:hover {
background: rgba(255, 255, 0, 0.5);
border-radius: 20px;
}
a#archive {
top: 48%;
margin-left: 14%;
width: 20%;
height: 15%;
}
This works great in a tall, narrow browser, but when the browser window is wider than it is tall, the percentages consider the dead space in the blank sidebars. How can I make the percentages consider only the actuall image?
So you know the reason.
This is because of the div(id=sitemap)'s width.
How about this one?
#sitemap {
/* for debug background-color: red; */
/* make sure the div width only size of contents */
display: inline-flex;
/* You set position relative to "img", but it semmed doesn't work because it isn't a parent‐child relationship */
position: relative;
}
#sitemap img{
max-width: 100vw;
max-height: 100vh;
/* position: relative; */
}
a#archive {
/* I think it's good enough setting two properties, unless you aren't particular about the details. */
top: 10%;
left: 10%;
}
I'm trying to make a responsive layout with media queries with flexbox. I need to make a layout with two sidebars on the right, right under each other, like this:
Image: aside right under the related
The current situation is like this (I'm able to move the box to the right too, but there is still a white space under the related, even though the height is good). Image: aside is on the the next line and not under the related
Simplified code:
body {
display: flex;
flex-direction: row;
}
header {
flex: 0 1 25%;
}
main {
flex: 0 1 40%;
}
.related {
flex: 0 1 17%;
height: 100%;
}
aside {
flex: 0 1 17%;
}
footer {
display: flex;
flex: 0 1 100%;
}
I can't put a wrapper for these two boxes in the HTML (I can't use a wrapper in the HTML itself, hence I use the body as flex container). Is what I want even possible with flexbox, or what kind of other technique could I use for this? I tried a lot of different things with the height, I even tried Javascript to make a dynamic wrapper, but that didn't work well with the media queries...
Please let me know if you need more information.
Your usage of body as a flex container, should not be a problem, unless there is a design problem. i think you should make layout design like
<http://codepen.io/erdysson/pen/wKyEzZ%20>
I hope, this solves the problem and is what you want.
Achieving the expected result without modifying your HTML markup with flexbox is a bit tricky.
However i believe the following example will help you, even though it´s not using the flexbox:
* {
box-sizing: border-box;
}
header,
aside,
footer,
.main,
.related {
min-height: 100px;
float: left;
position: relative;
}
header {
width: 25%;
background: #f00;
min-height: 200px;
}
.main {
width: 50%;
background: #0f0;
min-height: 200px;
}
.related {
width: 25%;
background: #0ff;
}
aside {
width: 25%;
background: #f0f;
float: right;
}
footer {
width: 100%;
background: #ff0;
}
header:after,
aside:after,
footer:after,
.main:after,
.related:after {
content: attr(data-title);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 22px;
}
<header data-title="header"></header>
<div class="main" data-title="main"></div>
<div class="related" data-title="related"></div>
<aside data-title="aside"></aside>
<footer data-title="footer"></footer>
Have an issue with Flexbox and space-between in Firefox 36. For reasons unknown space-between is not correct in Firefox (causing the strange margin on left) but perfect in Google Chrome.
Chrome screen capture
Firefox screen capture
CSS
.form-status {
display: flex;
justify-content: space-between;
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: $gray;
}
.step {
position: relative;
text-align: center;
padding-top: 15px;
color: $gray-light;
&:after {
content: "";
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
top: -11px;
left: 50%;
margin-left: -11px;
background: $gray;
border: 8px solid #0c0616;
box-sizing: content-box;
}
&:first-child, &:last-child {
&:before {
content: "";
position: absolute;
top: 0;
left: -100vw;
right: 0;
height: 1px;
background: black;
}
}
&:first-child:before { right: 50%; }
&:last-child:before { left: 50%; }
&.active {
color: white;
&:after { background: $brand-yellow; }
}
}
}
HTML
<div class="page-section page-section-dark page-section-narrow">
<div class="container">
<div class="form-status">
<div class="step {{#ifeq step "one"}}active{{/ifeq}}">
Basic Information
</div>
<div class="step {{#ifeq step "two"}}active{{/ifeq}}">
Agreement
</div>
<div class="step {{#ifeq step "three"}}active{{/ifeq}}">
Payment
</div>
</div>
</div>
</div>
The issue is from this styling on your final page:
.form-status:before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:#555
}
(which I think comes from the "&:before" in your original question).
.form-status is a flex container, and this is giving it an absolutely-positioned child -- and absolute positioning for children of flex containers doesn't quite work interoperably yet -- apparently IE (or their next-gen "Spartan") is the only browser to implement the latest spec-text on that right now.
This styling breaks your layout because the absolutely positioned child drops an invisible 0-sized "placeholder", which forms a 0-sized flex item, and that flex item affects the positioning of all the other flex items via participating in the space-around alignment. (This was required by an earlier version of the flexbox spec, but it's changed to no longer call for these placeholders to form flex items.)
I'm intending to bring Firefox up-to-date* on this aspect of flexbox soon (here's the bug on that), but in the meantime, I'd suggest avoiding using absolute positioning on any direct child of a flexbox, since it works differently in every browser right now.
*(UPDATE: This is now fixed in Firefox trunk builds. The fix will tentatively be in Firefox 52, which I believe ships in March 2017.)
I'm having an issue with the pseudo-class :hover in Google Chrome.
Basically I have an element that when in :hover state it's sibling is displayed. This works fine.
Then I add a media query so that when the viewport has a specific min-width the element is no longer displayed but the sibling is.
When going from the min-width to a smaller width the display:none on the sibling no longer fires.
It might be easier to understand by taking a look at this example. Try resizing the viewport.
http://jsfiddle.net/5gPGR/1/
HTML
<div id="container">
<div id="trigger">
</div>
<div id="target">
</div>
</div>
CSS
#container {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 24px;
line-height: 80px;
background: #777;
box-sizing: border-box;
}
#trigger {
position: absolute;
display: block;
width: 50%;
height: 80px;
top: 0;
right: 0;
background: #275;
}
#target {
position: absolute;
display: none;
width: 50%;
height: 80px;
top: 0;
left: 0;
background: #f57;
}
#trigger:hover ~ #target {
display: block;
}
#media screen and (min-width: 400px) {
#trigger {
display: none;
}
#target {
display: block;
}
}
This is only an issue in Chrome/Chrome Canary. I have tested in the latest versions of:
Chrome
Chrome Canary
FF
IE
Safari
Opera
Is there something I can do to resolve this or do I just need to stick with javascript for these kinds of interfaces.
EDIT:
I forgot to mention that if I force the element state to :hover using chrome dev tools it starts working again until the next resize.
Interesting error, I'm not sure why that happens
I was able to fix the issue by adding an empty #target:hover { }
Demo
If you're using a preprocessor that would remove this line, you can add a property that you already have, like #target:hover { display:block; }