diff --git a/README.md b/README.md index bbaf4ef..4f75eab 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,15 @@ +# ⚠️ Project Archived + +This project is no longer maintained and has been archived. +Thank you for your support and for being part of this journey. ❤️ + # Toolz

Toolz

-A set of testing and verification tools, with simple and beautiful design +A set of testing and verification tools, with simple and beautiful design ## Ad Block Test [Link](https://d3ward.github.io/toolz/adblock) This tool allows you to check if your adblock solution is blocking enough hosts. With a simple UI and easy UX you can check how much you have blocked. The tool tries to connect to the most common domains for different categories (ads, analytics, bug tracking, social trackers, mix and OEMs). @@ -13,13 +18,13 @@ If you don't block all the hosts but you want to , you can use - My hosts txt list -> [d3Host.txt](https://raw.githubusercontent.com/d3ward/toolz/master/src/d3host.txt) - Compressed adblock version -> [d3Host.adblock](https://raw.githubusercontent.com/d3ward/toolz/master/src/d3host.adblock) -d3Host list is also included in +d3Host list is also included in - [Blokada](https://blokada.org/) - [OISD List](https://oisd.nl/) ## Units Test of Viewport [Link](https://d3ward.github.io/toolz/units) -This tool is useful for testing different units for expressing a length in CSS. +This tool is useful for testing different units for expressing a length in CSS. One of them is the 'vh', where 100vh should be 100%, but on mobile browsers it isn't. Over the years, there has been a lot of talk about this problem on mobile browsers, mainly on Safari which uses WebKit, but Chromium browsers are affected as well. In addition to the test, there are in-depth studies and solutions available. ## Fontlist [Link](https://d3ward.github.io/toolz/fontlist) @@ -28,7 +33,7 @@ This tool allows you to check the list of web safe fonts supported by your brows ## Contributing -If you have any problems with any of the tools, feel free to share them by opening an issue. +If you have any problems with any of the tools, feel free to share them by opening an issue. You can also suggest a new test tool to be created or added. Contributions are welcome and encouraged. diff --git a/src/adblock.ejs b/src/adblock.ejs index 20f6e08..eccc68a 100644 --- a/src/adblock.ejs +++ b/src/adblock.ejs @@ -4,112 +4,17 @@ { page:'adblock', title:'Test Ad Block - Toolz', - description:'Looking for an easy way to check the efficiency of your ad blocker?'+ - 'Toolz offers a simple and beautiful design test that allows you to quickly and easily test the performance of '+ - 'current ad/content blocker solution. Intuitive interface makes it easy to navigate and use, and the beautiful design ensures that the experience is visually appealing. '+ - 'With just a click, you can see how well the ad blocker is working and make any necessary adjustments.', + description:'Project Archived', url: 'd3ward.github.io/toolz/adblock', preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', keywords:'adblock test,ad block test,ad blocker test,adblock,test adblock,analytics,trackers,ads,cosmetic filter,ublock, ublockorigin,adblock extension,script loading' }) %> - - <%- include('partials/adblock/results.ejs') %> - <% const adblock_compatibility = require('./data/adblock_compatibility.json') %> - + <%- include('partials/support_me.ejs') %> - <%- include('partials/adblock/settings.ejs') %> - <%- include('partials/adblock/faq.ejs') %> - <%- include('partials/adblock/changelog.ejs') %> - <%- include('partials/adblock/logs.ejs') %> <%- include('partials/header.ejs', {page:'adblock'}) %> - -
+ +
-
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
- - - - - - - - -
-
- - - - -
-
- - - - -
- -
-
-
-
-
-
-
-
-
-
-
- -
-
-
- - - - Total : - - - - - - - -
-
-
-
-
-
- - - - -
-
-
- - The test may not work as expected with some browser/blocker combinations.
- To ensure a smooth experience, please check the compatibility list before testing.
-
- I ask that you please refrain from reporting them directly to the browser or adblock solution provider.
- Instead, I encourage you to report problems directly to the Toolz project issues
- - - - - Create issue on Toolz -
-
-
-
-
-
-
-
-
-
-
- - - - - -   Cosmetic Filter -
-
-
-
- - - - - -   - Static Ad - -
-
-
-
- - - - - - - - - -   - Dynamic Ad -
-
-
- -
-
-
- Why Cosmetic Filter test fails? -
-

- If a cosmetic filter test fails, it simply means that the specific website being tested - (in this case d3ward.github.io) isn't included in any of adblock's rules or lists.
- It's important to note that this does not mean that cosmetic filtering fails on all websites.
You can - confirm this by visiting a popular, ad-rich site where you're unlikely to see any ad boxes.
- The purpose of this test is to assess the functionality of the blocking feature, not to determine its scope - or coverage. By adding the following rules to your adblock solution, you may be able to solve the problem: -

- - 
-											d3ward.github.io##.adbox.banner_ads.adsbox
-d3ward.github.io##.textads
- Adding these rules could lead to a successful test result proving your adblock - solution have that feature of blocking with cosmetic filters -
-
- -
-
-
-
-
-
- - - - - -   Ad Scripts Loading -
-
-
-
- ads.js - -
-
-
-
- pagead.js - -
-
-
-
-
- Why Ad Script Loading test fails?? -
-

- Same as the cosmetic tests. If an ad script load test fails, it usually means that the specific website being - tested isn't covered by any of adblock's rules or lists, especially for blocking ad-related scripts like my fake - ads.js
- However, this error doesn't indicate a general failure of ad script blocking on all websites.
- To check, you can visit a popular website known for its abundance of ads scripts.
- Chances are that you won't encounter any blocked ad scripts. - It's important to understand that this test is designed to evaluate the functionality of ad script blocking, not - its scope or effectiveness. - To potentially fix the problem, consider adding the following rules to your adblock solution: -

- 
/pagead.js$domain=d3ward.github.io
-/widget/ads.
- Adding these rules could lead to a successful test result proving your adblock - solution have that feature of blocking script loading -
-
- -
-
-
-
-
-
-
-
-
-
+ +
+
+
+ + This project is no longer maintained and has been archived.
+ Thank you for being part of this journey and for your support. +
+
+
<%- include('partials/footer.ejs') %> <%- include('partials/gotop.ejs') %> - \ No newline at end of file + diff --git a/src/fontlist.ejs b/src/fontlist.ejs index c1a935f..6d0cdf0 100644 --- a/src/fontlist.ejs +++ b/src/fontlist.ejs @@ -17,6 +17,13 @@ <%- include('partials/header.ejs', {page:'fontlist'}) %>
+
+
+ + This project is no longer maintained and has been archived.
+ Thank you for being part of this journey and for your support. +
+
.custom-font { font-family: Arial; font-weight: 500; - font-size: 48px; + font-size: 48px; letter-spacing: 0px; line-height: 1.4; }
@@ -104,7 +111,7 @@
- +
@@ -114,4 +121,4 @@ <%- include('partials/footer.ejs') %> <%- include('partials/gotop.ejs') %> - \ No newline at end of file + diff --git a/src/index.ejs b/src/index.ejs index 3791b89..760dbbd 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -12,12 +12,19 @@ preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', keywords:'toolz,web tools,tools,browser testing,font testing,viewport testing,adblock testing, ad blocker testing,performance,toolkit,web design,open source' }) %> - + <%- include('partials/support_me.ejs') %> <%- include('partials/adblock/changelog.ejs') %> <%- include('partials/header.ejs', {page:'index'}) %>
+
+
+ + This project is no longer maintained and has been archived.
+ Thank you for being part of this journey and for your support. +
+
@@ -26,7 +33,7 @@ - +

Toolz

Collection of browser testing tools.

@@ -76,4 +83,4 @@ <%- include('partials/gotop.ejs') %> - \ No newline at end of file + diff --git a/src/js/adblock.js b/src/js/adblock.js index 1ed51d3..d81d835 100644 --- a/src/js/adblock.js +++ b/src/js/adblock.js @@ -1,5 +1,4 @@ import '../sass/adblock.sass' -import * as data from '../data/adblock_data.json' import packageJSON from '../../package.json' import { icons } from '../data/icons' import { navbar } from './components/navbar' @@ -7,516 +6,23 @@ import A11yDialog from './components/dialog' import { themeManager } from './components/themeManager' import { gotop } from './components/gotop' import { aos } from './components/aos' -import { fadeIn, fadeOut } from './components/fade' -import { Snackbar } from './components/snackbar' + import { LocalStorageManager } from './components/localStorage' -const cd = document.querySelector('#dlg_changelog') -const ch_dialog = new A11yDialog(cd) + var TZ = new LocalStorageManager('toolz') const version = packageJSON.version const tzversion = TZ.get('version') if (tzversion !== version) { console.log(version, tzversion) //Show changelog - ch_dialog.show() + //ch_dialog.show() //Set version TZ.set('version', version) } -var LS = new LocalStorageManager('adb_tool') -var results = LS.get('results') -var settings = LS.get('settings') -if (!settings || settings['showCF'] == undefined) { - settings = { - collapseAll: true, - showCF: true, - showSL: true - } - LS.set('settings', settings) -} - -var tslog = '' -if (!results) results = [] -var test_log = document.getElementById('test_log') -var snackbar = new Snackbar({ - topPos: '10px', - classNames: 'success', - autoClose: true, - autoCloseTimeout: 2000 -}) -function downloadResult(k) { - var r - results.forEach((ri) => { - console.log(ri['time'], k) - if (ri['time'] == k) r = ri - }) - var data = JSON.stringify(r) - var blob = new Blob([data], { type: 'application/json' }) - var url = URL.createObjectURL(blob) - var linkElement = document.createElement('a') - linkElement.setAttribute('download', 'd3_adb_' + r.date + '.json') - var revokeAndDownload = function () { - URL.revokeObjectURL(linkElement.href) - linkElement.href = url - linkElement.click() - } - if (linkElement.href) { - URL.revokeObjectURL(linkElement.href) - setTimeout(revokeAndDownload, 1000) - } else { - revokeAndDownload() - } -} -async function copyToClip(str) { - try { - await navigator.clipboard.writeText(str).then(() => { - snackbar.show('URL copied to clipboard !') - }) - } catch (err) { - const txt = document.createElement('textarea') - txt.value = str - txt.setAttribute('readonly', '') - txt.style.position = 'absolute' - txt.style.left = '-9999px' - document.body.appendChild(txt) - - txt.select() - txt.setSelectionRange(0, 99999) - document.execCommand('copy') - txt.remove() - snackbar.show('URL copied to clipboard !') - } -} -var abt = { - total: 0, - blocked: 0, - notblocked: 0, - cosmetic_test: { - static: null, - dynamic: null - }, - script: { - ads: null, - pagead: null, - partnerads: null - }, - hosts: {} -} -const testWrapper = document.getElementById('test') //Tests wrapper - -//-------------------------------------------------- -//Function to check a host blocking status -async function check_url(url, div, parent, k1, k2) { - const controller = new AbortController() - const config = { - ...{ - method: 'HEAD', - mode: 'no-cors' - }, - signal: controller.signal - } - const timeout = setTimeout(() => { - controller.abort() - }, 8000) - abt.total += 1 - var hostDiv = document.createElement('div') - hostDiv.onclick = () => { - copyToClip(url) - } - div.appendChild(hostDiv) - try { - await fetch( - 'https://' + url + '/fakepage.html', - config, - timeout, - parent, - div - ) - .then((response) => { - console.log(response) - if (response.type == 'basic' && response.status == 200) { - hostDiv.innerHTML = icons['v'] + '' + url + '' - abt.blocked += 1 - Object.assign(abt.hosts[k1][k2], { [url]: true }) - tslog += '
' + url + ' - blocked' - } else { - //Response was received --> ads are NOT blocked - parent.style.background = 'var(--red)' - hostDiv.innerHTML = icons['x'] + '' + url + '' - abt.notblocked += 1 - Object.assign(abt.hosts[k1][k2], { [url]: false }) - tslog += '
' + url + ' - not blocked' - } - }) - .catch((error) => { - console.log(error) - console.log(error.message) - hostDiv.innerHTML = icons['v'] + '' + url + '' - abt.blocked += 1 - Object.assign(abt.hosts[k1][k2], { [url]: true }) - tslog += '
' + url + ' - blocked' - //No response / error --> ads are blocked - }) - } catch (error) { - console.log(error) - } -} - -//Function to collapse a test -function collapse_category(cc, c) { - var others = document.querySelectorAll('.test_collapse') - others.forEach((element) => { - if (cc == true) element.parentElement.classList.add('show') - else element.parentElement.classList.remove('show') - if (c == true) - element.addEventListener('click', () => { - element.parentElement.classList.toggle('show') - }) - }) -} - -// Function to fetch all the tests -async function fetchTests() { - let fetches = [] - Object.keys(data).forEach((key) => { - if (key == 'default') return - var catEl = document.createElement('div') - catEl.className = 'grid' - catEl.id = key - catEl.innerHTML = - '
' + icons[key] + '  ' + key + '
' - testWrapper.appendChild(catEl) - var category = data[key] - var total_hosts = 0 - abt.hosts[key] = {} - var dd_1 = document.createElement('div') - dd_1.classList.add('col-6') - var dd_2 = document.createElement('div') - dd_2.classList.add('col-6') - - catEl.appendChild(dd_2) - catEl.appendChild(dd_1) - var i = 0 - Object.keys(category).forEach((keyC) => { - var testInfo = document.createElement('div') - var tests_count = 0 - var div = document.createElement('div') - const dw = document.createElement('div') - div.classList.add('test') - div.id = keyC - div.style.background = 'var(--green)' - let tc = icons[keyC] != undefined ? icons[keyC] + ' ' : '' - div.innerHTML = - "" + tc + keyC + '' - div.appendChild(dw) - if (i % 2 == 0) { - dd_2.appendChild(div) - } else { - dd_1.appendChild(div) - } - i++ - Object.assign(abt.hosts[key], { [keyC]: {} }) - if (Object.prototype.hasOwnProperty.call(category, keyC)) { - var value = category[keyC] - for (let i = 0; i < value.length; i++) { - fetches.push( - check_url(value[i], dw, div, key, keyC).then(() => { - set_liquid() - }) - ) - tests_count++ - } - } - testInfo.innerHTML = keyC + ' => n° tests => ' + tests_count - test_log.appendChild(testInfo) - total_hosts += tests_count - }) - var total_tests = document.createElement('div') - total_tests.innerHTML = - key + - ' => Total n° tests => ' + - total_hosts + - '
------------------------- ' - test_log.appendChild(total_tests) - }) - - let results = await Promise.all(fetches) - return results -} - -function ad_script_test() { - let log = document.createElement('div') - const sfa1 = document.querySelector('#sfa_1') - const sfa2 = document.querySelector('#sfa_2') - - abt.script.ads = typeof s_test_ads == 'undefined' - abt.script.pagead = typeof s_test_pagead == 'undefined' - abt.script.partnerads = typeof s_test_partnerads == 'undefined' - sfa1.classList.add(abt.script.ads ? '_bg-green' : '_bg-red') - sfa2.classList.add(abt.script.pagead ? '_bg-green' : '_bg-red') - abt.blocked += (abt.script.ads ? 1 : 0) + (abt.script.pagead ? 1 : 0) - abt.notblocked += (abt.script.ads ? 0 : 1) + (abt.script.pagead ? 0 : 1) - test_log.appendChild(log) - log.innerHTML = - '
script_ads : ' + - abt.script.ads + - '
script_pagead : ' + - abt.script.pagead + - '

------------------------- ' - set_liquid() -} -const ctd = document.querySelector('#ctd_test') - -//Static -function cosmetic_test_static() { - setTimeout(function () { - const cts = document.querySelector('#cts_test') - abt.cosmetic_test.static = - cts.clientHeight || - cts.offsetHeight || - window.getComputedStyle(cts, null).getPropertyValue('display') == - 'block' - ? false - : true - abt.blocked += abt.cosmetic_test.static ? 1 : 0 - abt.notblocked += abt.cosmetic_test.static ? 0 : 1 - document - .querySelector('#ct_static') - .classList.add(abt.cosmetic_test.static ? '_bg-green' : '_bg-red') - let log = document.createElement('div') - test_log.appendChild(log) - log.innerHTML = - ' cosmetic_static_ad : ' + - abt.cosmetic_test.static + - '

------------------------- ' - set_liquid() - }, 500) -} -//Dynamic -function cosmetic_test_dynamic() { - let log = document.createElement('div') - let ad = document.createElement('div') - ad.id = 'ad_ctd' - ad.className = - 'textads banner-ads banner_ads ad-unit afs_ads ad-zone ad-space adsbox' - ad.innerHTML = ' ' - ctd.appendChild(ad) - setTimeout(function () { - let adt = document.querySelector('#ad_ctd') - abt.cosmetic_test.dynamic = - adt.offsetHeight || - adt.clientHeight || - window.getComputedStyle(adt, null).getPropertyValue('display') == - 'block' - ? false - : true - abt.blocked += abt.cosmetic_test.dynamic ? 1 : 0 - abt.notblocked += abt.cosmetic_test.dynamic ? 0 : 1 - test_log.appendChild(log) - log.innerHTML = - ' cosmetic_dynamic_ad : ' + - abt.cosmetic_test.dynamic + - '

------------------------- ' - document - .querySelector('#ct_dynamic') - .classList.add(abt.cosmetic_test.dynamic ? '_bg-green' : '_bg-red') - set_liquid() - }, 500) -} - -const lt_particles = document.querySelector('.lt_particles') -const lt_cwrap = document.querySelector('.lt_cwrap') -async function startAdBlockTesting() { - document.querySelector('.lt_wrap').classList.add('start') - lt_cwrap.classList.add('start') - let tests = [] - if (settings['showCF'] == true) { - abt.total += 2 - tests.push(cosmetic_test_static()) - tests.push(cosmetic_test_dynamic()) - } else { - document.querySelector('#cf_wrap').style.display = 'none' - } - if (settings['showSL'] == true) { - abt.total += 2 - tests.push(ad_script_test()) - } else { - document.querySelector('#sl_wrap').style.display = 'none' - } - - tests.push(fetchTests()) - let results = await Promise.all(tests) - return results -} -function set_liquid() { - var p = (100 / abt.total) * abt.blocked - var c = p > 30 ? (p > 60 ? 'var(--green)' : 'var(--orange)') : 'var(--red)' - document.body.style.setProperty('--liquid-percentage', 45 - p + '%') - document.body.style.setProperty('--liquid-color', c) - document.body.style.setProperty( - '--liquid-title', - "'" + Math.round(p) + "%'" - ) -} - -function stopAdBlockTesting() { - fadeOut(lt_particles, () => { - document.querySelector('.lt_wrap').classList.remove('start') - fadeIn(lt_particles, 'flex') - document.body.classList.remove('_overflowhidden') - }) - lt_cwrap.classList.remove('start') - console.log(abt) -} -function render_tests() { - var r_wrap = document.querySelector('.r_wrap') - r_wrap.innerHTML = '' - results.forEach((r, index) => { - var div = document.createElement('div') - div.className = 'col-6' - var abt_r = results[index].abt - var t = - '' + - icons['cdot'] + - 'Total : ' + - abt_r.total + - '
' + - icons['x'] + - ' ' + - abt_r.notblocked + - ' not blocked' + - icons['v'] + - ' ' + - abt_r.blocked + - ' blocked' - div.innerHTML = - "
" + - t + - '
' + - r.date + - '
' - r_wrap.insertBefore(div, r_wrap.children[0]) - }) - document.querySelectorAll('button[data-r]').forEach((el) => { - el.addEventListener('click', () => { - downloadResult(el.getAttribute('data-r')) - }) - }) -} - -function leading_zero(val) { - return (val < 10 ? '0' : '') + val -} - -//Browser : \nOS : \nAd-block : \nDNS : \nVPN : -function add_report() { - let ms = Date.now() - var date = new Date(ms) - let d = - date.getDate() + - '/' + - (date.getMonth() + 1) + - '/' + - date.getFullYear() + - ' ' + - leading_zero(date.getHours()) + - ':' + - leading_zero(date.getMinutes()) + - ':' + - leading_zero(date.getSeconds()) - if (results.length < 10) { - results.push({ time: ms, date: d, note: '', abt: abt }) - } else { - results.splice(0, 1) - results.push({ time: ms, date: d, note: '', abt: abt }) - } - LS.set('results', results) - render_tests() - console.log(abt) -} -window.onbeforeunload = function () { - window.scrollTo(0, 0) -} - -const el = (l) => { - return document.querySelector(l) -} document.addEventListener('DOMContentLoaded', function () { new navbar() new themeManager() new gotop() new aos() - console.log(settings) - for (const key in settings) { - try { - console.log(`${key}: ${settings[key]}`) - - const c = document.querySelector('#' + key) - c.checked = settings[key] - c.addEventListener('change', () => { - settings[key] = c.checked - console.log(key, c.checked) - if (key == 'collapseAll') - collapse_category(settings[key], false) - LS.set('settings', settings) - }) - } catch (error) { - console.log(error) - } - } - render_tests() - - startAdBlockTesting().then(() => { - collapse_category(settings['collapseAll'], true) - //Add a delay in order to show properly the animation - setTimeout(() => { - stopAdBlockTesting() - add_report() - var tsl = document.createElement('div') - tslog += - '
-----
Total : ' + - abt.total + - '
Blocked : ' + - abt.blocked + - '
Not Blocked : ' + - abt.notblocked - tsl.innerHTML = tslog - test_log.appendChild(tsl) - fadeIn(document.querySelector('#adb_test'), 'flex') - const r = document.querySelector('#adb_test_r') - - r.innerHTML = - '' + - icons['cdot'] + - ' Total : ' + - abt.total + - '' + - icons['v'] + - ' ' + - abt.blocked + - ' blocked' + - icons['x'] + - ' ' + - abt.notblocked + - ' not blocked ' - }, 2000) - }) - - document.querySelector('#start_test').addEventListener('click', () => { - location.reload(true) - }) - const stxt = - 'https://raw.githubusercontent.com/d3ward/toolz/master/src/d3host.txt' - const sadblock = - 'https://raw.githubusercontent.com/d3ward/toolz/master/src/d3host.adblock' - document.querySelector('#d3H_txt').addEventListener('click', function () { - copyToClip(stxt) - }) - el('#d3H_adblock').addEventListener('click', function () { - copyToClip(sadblock) - }) }) diff --git a/src/sass/adblock.sass b/src/sass/adblock.sass index 3ab0881..e1bc2c8 100644 --- a/src/sass/adblock.sass +++ b/src/sass/adblock.sass @@ -42,7 +42,6 @@ @import "./utilities/text" main - min-height: 100vh --bg-details: var(--bg3) #dlg_compatibility z-index: 52!important @@ -405,4 +404,4 @@ footer>div #adb_test_r>span display: flex align-items: center - gap: .5rem \ No newline at end of file + gap: .5rem diff --git a/src/sass/theme/dark.sass b/src/sass/theme/dark.sass index 8c3cb67..e7a360e 100644 --- a/src/sass/theme/dark.sass +++ b/src/sass/theme/dark.sass @@ -20,6 +20,9 @@ --orange-h: #{$orange-800} --orange-l: #{$orange-400} --orange-d: #{$orange-600} + --gray: #{$gray-600} + --gray-l: #{$gray-500} + --gray-d: #{$gray-800} --txt-l:var(--white-l) --txt-p : var(--white) --txt-red : var(--white) diff --git a/src/sass/utilities/_background.sass b/src/sass/utilities/_background.sass index 5eb4591..babace3 100644 --- a/src/sass/utilities/_background.sass +++ b/src/sass/utilities/_background.sass @@ -1,5 +1,5 @@ /* --------- Background Color Utility --------- */ -$bgcolors: ("primary","black","white","blue","red","green","yellow","orange")!default +$bgcolors: ("primary","black","white","blue","red","green","yellow","orange","gray")!default @each $var in $bgcolors ._bg-#{$var} background-color: var(--#{$var})!important @@ -8,4 +8,4 @@ $bgcolors: ("primary","black","white","blue","red","green","yellow","orange")!de ._bg2 background-color: var(--bg2)!important ._bg3 - background-color: var(--bg3)!important \ No newline at end of file + background-color: var(--bg3)!important diff --git a/src/units.ejs b/src/units.ejs index 0caade8..ecd0c59 100644 --- a/src/units.ejs +++ b/src/units.ejs @@ -1,8 +1,8 @@ - <%- include('partials/head.ejs', { - page: 'units' , - title:'Units - Toolz', - description:'Test viewport units of your browser.', + <%- include('partials/head.ejs', { + page: 'units' , + title:'Units - Toolz', + description:'Test viewport units of your browser.', url: 'd3ward.github.io/toolz' , preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', keywords:'viewport,toolz,units,css,web tools,testing,' }) %> @@ -12,13 +12,20 @@ <%- include('partials/adblock/changelog.ejs') %> <%- include('partials/header.ejs', {page:'units'}) %>
+
+
+ + This project is no longer maintained and has been archived.
+ Thank you for being part of this journey and for your support. +
+
- +
Units - +

innerHeight property returns the height of the content area of a window
@@ -28,7 +35,7 @@ These tests can be used to check the value of each unit.

- +
100vh
@@ -78,7 +85,7 @@ These tests can be used to check the value of each unit.
100% position:absolute
- +
@@ -87,7 +94,7 @@ These tests can be used to check the value of each unit. - +
@@ -97,7 +104,7 @@ These tests can be used to check the value of each unit. 100vh in Safari CSS 100vh Mobile Browsers - It’s not a bug, @@ -105,7 +112,7 @@ These tests can be used to check the value of each unit. The trick of Viewport Units - Avoid 100vh on Mobile Web @@ -122,4 +129,4 @@ These tests can be used to check the value of each unit. - \ No newline at end of file +