This snippet with 'spaces' around the tilde does not work.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does not work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
This snippet without the spaces does work.
h3~p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Undo will revert to not working whereas when I put 'new' blank spaces around the tilde it works.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Since CSS in general has the power to make me want to tear my hair out it would be nice if someone could help me avoid these kinds of problems.
It's because you have a non-breaking space right after the tilde in your first example. It appears if you accidentally press option+space instead of space.
Read more here
The errors like this is a real headache sometimes!
Related
I defined a transition to my input and it applies but but it disappears without animation.
How can I make it animate while disappearing?
input {
transition: 1s;
}
input:focus {
background-color: aqua;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You need to define a default color for the transition to work
input{
background-color: white;
transition: 1s;
}
input:focus{
background-color: aqua;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
There are various Approaches for that -
You just need to set default property to the input
input{
background-color: #fff;
}
input:focus{
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You can use :not selector which matches every element that is NOT the specified element/selector. But this is just a approach not a correct way.
input{
transition: 1s;
}
input:focus{
background-color: aqua;
}
input:not(:focus){
background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
You can use JS for mouse events like mouseenter and mouseleave.
let inputTxt = document.querySelector('input[type=text]');
inputTxt.addEventListener("mouseenter", function() {
inputTxt.style.backgroundColor = "aqua";
});
inputTxt.addEventListener("mouseleave", function() {
inputTxt.style.backgroundColor = "#fff";
});
input {
background-color: #fff;
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" autocomplete="on">
</body>
</html>
I have read a post, link here: Render-tree Construction, Layout, and Paint
A demo page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No JS</title>
<link rel="stylesheet" href="http://127.0.0.1:3000/static/css/style.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
The Performance Panel:
Enlarge the red part:
As you see, there is no step of Render-tree Construction.
Why? Does the post wrong or the Render-tree Construction part is in Recalculate Style?
I want my borders to be on top for mobile like devices and on the left for others.
It's working on mobile but for others it's adding the properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-l-lg">
</body>
</html>
Since you are adding rounded-t-lg without a prefix, it takes effect on all screen sizes.
To hide the top border on screens at the sm breakpoint you will have to add sm:rounded-t-none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-t-none sm:rounded-l-lg">
</body>
</html>
this is App1 image:
this is App2 image:
note: this webpage runs in a same device(my phone with Android 5.1)
source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
<title>Document</title>
<style>
html,body{font-size:62.5%}
.div1{
font-size:2rem;
}
.div2{
font-size:20px;
}
</style>
</head>
<body>
<div class="div1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（2rem）</div>
<div class="div2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（20px）</div>
</body>
</html>
I have a ReactJS website recently deployed on Heroku, and believe I have what's needed for a website to be mobile responsive, yet the website just looks exactly how it should look like if it were to be viewed on a desktop. Everything is extremely small when viewed on mobile.
What could be the issue?
Here is the HTML:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script></body>
</html>
Maybe the content extends past the container, like images or something. Try this to see if that's the case:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>