Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
CSS Showcase: Content-Visibility
  • Loading branch information
@plb18001
plb18001 committed Mar 7, 2022
1 parent 383bfe2 commit bfe4e76
Show file tree
Hide file tree
Showing 4 changed files with 282 additions and 38 deletions.
140 changes: 126 additions & 14 deletions css-showcase/css/main.css
View file
Expand Up @@ -87,37 +87,149 @@ textarea {
Author's custom styles
========================================================================== */

* {
/* * {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
} */
html {
background-color: rgb(224, 192, 150);
}
#base-div {
a {
color: black;
}
#title-text {
color: white;
}
.title {
text-align: center;
}
.title2 {
display: inline-block;
margin-left: 10px;
}
#nav {
text-align: center;
}
#title-div {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(80, 80, 14);
}
.title {
#about-desc, #browser-div,.explain-div {
margin: 10px;
margin-left: 15px;
background: white;
padding: 10px;
width: 90%;
display: flex;
text-align: center;
justify-content: center;
}
#browser-div {
flex-direction: column;
}
#disp-exp-div, #vis-exp-div, #cont-exp-div {
display: none;
}
#click {
margin-left: 10px;
margin-right: 10px;
}
#img-div, #img-text-div {
#reset {
margin-bottom: 10px;
}
#img-text-div {
display: flex;
flex-direction: column;
align-items: center;
}
#browser-show{
border: none;
background-color: inherit;
cursor: pointer;
font-size: 20px;
}
#browser-show-div {
background-color: lightgrey;
display: flex;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
}
#browser-div {
display: none;
}
.img-text-content {
margin-left: 80px;
border: none;
background-color: inherit;
cursor: pointer;
display: inline-block;
font-size: 25px;
}
.img-text-content:hover{
background: #999999;
}
.img-content, .img-text-content {
margin: 1em;
}
#why-div {
display: flex;
flex-direction: column;
align-items: center;
}
#why-img {
object-fit: cover;
}
#why-desc {
margin: 1em;
text-align: center;
}
#display-text {
padding-left: 30px;
#outro {
text-align: center ;
}
#visibility-text {
padding-left: 50px;
@media (max-width: 587px){
#top{
display: none;
}
#content-image, #display-image {
display: none;
}
#img-text-div{
text-align: center;
}
#img-div {
display: flex;
justify-content: center;
}
#about-desc, .explain-div, #browser-div {
margin: auto;
margin-left: 10px;
margin-bottom: 15px;
}
}
#content-text {
padding-right: 40px;
@media (min-width: 587px){
.container {
margin:0 auto;
width:960px;
background-color: tan;
}
#top {
position: fixed;
background-color: grey;
left: 1350px;
top: 600px;
padding: 10px;
border-radius: 5px;
}
#img-div, #img-text-div {
display: flex;
justify-content: center;
}
#about-desc, #browser-div, .explain-div {
margin-left: 35px;
}
}



/* ==========================================================================
Expand Down
Binary file added css-showcase/img/CV-chunks.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
120 changes: 96 additions & 24 deletions css-showcase/index.html
View file
@@ -1,10 +1,10 @@
<!doctype html>
<html class="no-js" lang="">
<html class="no-js" lang="eng">

<head>
<meta charset="utf-8">
<title>Week-5 Part-1</title>
<meta name="description" content="Week-5.1">
<title>Paolo's CSS-Showcase</title>
<meta name="description" content="Content-Visibility Differences">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta property="og:title" content="">
Expand All @@ -23,36 +23,108 @@
</head>

<body>
<div class="title-div">
<h1 class="title">Content-Visibility</h1>
<h2 class="title">The Differences</h2>
<a href="#title-div"><div id="top">
<p>back to top</p>
</div></a>

<div class="container">
<div id="title-div">
<h1 class="title" id="title-text">Content-Visibility CSS-Showcase</h1>
<div id="nav">
<nav>
<h3 class="title title2"><a href="#about">What is it</a></h3>
<h3 class="title title2"><a href="#click">The Differences</a></h3>
</nav>
</div>
</div>
<hr id="title-hr">

<div id="about">
<h1 class="title">What is the Content-Visibility Property?</h1>

<div class="title-div">
<h1 class="title">Hover Over the Text to Execute Command</h1>
</div>
<div id="about-desc">
<p>The <strong>content-visibility</strong> CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. Basically it enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.</p>
</div>

<div id="img-text-div">
<h2 class="img-text-content" id="display-text">Display: None;</h2>
<h2 class="img-text-content" id="visibility-text">Visibility: None;</h2>
<h2 class="img-text-content" id="content-text">Content-Visibility: None;</h2>
<h1 class="title">Browser Compatability</h1>

<div id="browser-show-div">
<button type="button" id="browser-show">Show Full List</button>
</div>
<div id="browser-div">
<p>Chrome ------------ <strong style="color: green">Full Support</strong> ------------ 85</p>
<hr class="browser-hr">
<p>Edge ------------ <strong style="color: green">Full Support</strong> ------------ 85</p>
<hr class="browser-hr">
<p>Firefox ------------ <em style="color: red">No Support</em> ------------ //</p>
<hr class="browser-hr">
<p>Internet Explorer ------------ <em style="color: red">No Support</em> ------------ //</p>
<hr class="browser-hr">
<p>Opera ------------ <strong style="color: green">Full Support</strong> ------------ 71</p>
<hr class="browser-hr">
<p>Safari ------------ <strong style="color: green">Full Support</strong> ------------ 15.4</p>
<hr class="browser-hr">
<p>WebView Android ------------ <strong style="color: green">Full Support</strong> ------------ 85</p>
<hr class="browser-hr">
<p>Chrome Android ------------ <strong style="color: green">Full Support</strong> ------------ 85</p>
<hr class="browser-hr">
<p>Firefox for Android ------------ <strong style="color: red">No Support</strong> ------------ //</p>
<hr class="browser-hr">
<p>Opera Android ------------ <strong style="color: green">Full Support</strong> ------------ 60</p>
<hr class="browser-hr">
<p>Safari on IOS ------------ <strong style="color: green">Full Support</strong> ------------ 15.4</p>
<hr class="browser-hr">
<p>Samsung Internet ------------ <strong style="color: green">Full Support</strong> ------------ 85</p>
</div>
</div>

<div id="img-div">
<img class="img-content" id="display-image" src="img/dancing-towers-seoul.jpg"
alt="Dancing Towers in Seoul" width="200" height="200">

<img class="img-content" id="visibility-image" src="img/dancing-towers-seoul.jpg"
alt="Dancing Towers in Seoul" width="200" height="200">

<img class="img-content" id="content-image" src="img/dancing-towers-seoul.jpg"
alt="Dancing Towers in Seoul" width="200" height="200">

<div id="why-div">
<h1 id="why-title">Why Use It?</h1>
<img id="why-img" width="90%" height="90%" src="img/CV-chunks.jpg">
<p id="why-desc">Applying <code>content-visibility: auto;</code> to chunked content areas gives a 7x rendering performance boost on initial load.</p>
</div>


<div id="differences">
<div id="click">
<h1 class="title">Execute Command on Middle Picture</h1>
</div>

<div>
<div id="img-text-div">
<button type="button" class="img-text-content" id="display-text">display: none;</button>
<div class="explain-div"id="disp-exp-div">
<p class="explain-text" id="disp-exp">The <code>display: none;</code> property Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.
</p>
</div>

<button type="button" class="img-text-content" id="visibility-text">visibility: hidden;</button>
<div class="explain-div"id="vis-exp-div"><p class="explain-text" id="vis-exp">The <code>visibility: hidden;</code> property is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).</p></div>

<button type="button" class="img-text-content" id="content-text">content-visibility: hidden;</button>
<div class="explain-div"id="cont-exp-div"><p class="explain-text" id="cont-exp">The <code>content-visibility: hidden;</code> property skips its elements contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents display: none.</p></div>

<button type="button" id="reset">Reset</button>
</div>



<div id="img-div">
<img class="img-content" id="display-image" src="img/dancing-towers-seoul.jpg"
alt="Dancing Towers in Seoul" width="200" height="200">

<img class="img-content" id="visibility-image" src="img/dancing-towers-seoul.jpg"
alt="Dancing Towers in Seoul" width="200" height="200">

<img class="img-content" id="content-image" src="img/dancing-towers-seoul.jpg"
alt="Dancing Towers in Seoul" width="200" height="200">
<hr>
</div>

</div>

<p id="outro">By: Paolo Bautista</p>
</div>

<!-- Add your site or application content here -->
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
Expand Down
60 changes: 60 additions & 0 deletions css-showcase/js/main.js
View file
@@ -0,0 +1,60 @@
// Declare Button Variables
const displayButton = document.querySelector('#display-text');
const visibilityButton = document.querySelector('#visibility-text');
const contentButton = document.querySelector('#content-text');
const resetButton = document.querySelector('#reset');

const dispExpDiv = document.querySelector('#disp-exp-div');
const visExpDiv = document.querySelector('#vis-exp-div');
const contExpDiv = document.querySelector('#cont-exp-div');

const middlePic = document.querySelector('#visibility-image');

//---------------------------------------------------------------

// Change css for each button attribute
displayButton.onclick = function disp() {
middlePic.style.display = "none";
dispExpDiv.style.display = "block";
visibilityButton.style.display = "none";
contentButton.style.display = "none";
}

visibilityButton.onclick = function vis() {
middlePic.style.visibility = "hidden";
visExpDiv.style.display = "block";
displayButton.style.display = "none";
contentButton.style.display = "none";
}

contentButton.onclick = function cont(){
middlePic.style.contentVisibility = "hidden";
contExpDiv.style.display = "block";
displayButton.style.display = "none";
visibilityButton.style.display = "none";
}

resetButton.onclick = function reset(){
middlePic.style.contentVisibility = "visible";
middlePic.style.visibility = "visible";
middlePic.style.display = "block";
contExpDiv.style.display = "none";
visExpDiv.style.display = "none";
dispExpDiv.style.display = "none";
displayButton.style.display = "block";
visibilityButton.style.display = "block";
contentButton.style.display = "block";
}

//---------------------------------------------------------------

const browserButton = document.querySelector('#browser-show-div');
const browserList = document.querySelector('#browser-div');

browserButton.onclick = function browser() {
if (browserList.style.display === "none")
browserList.style.display = "block"
else {
browserList.style.display = "none";
}
}

0 comments on commit bfe4e76

Please sign in to comment.