Skip to content
Permalink
c4a871961d
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

dmd3470-spring-2022/css-showcase/index.html

Go to file
 
 
Cannot retrieve contributors at this time
141 lines (113 sloc) 6.61 KB
Raw Blame
<!doctype html>
<html class="no-js" lang="eng">
<head>
<meta charset="utf-8">
<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="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<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 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>
<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="why-div">
<h1 id="why-title">Why Use It?</h1>
<img id="why-img" width="90%" height="90%" alt="Chunks Demo" 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 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>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>