CSS – Burakoff.com FAQs

console.time() and console.timeEnd()

console.time(‘myTimer’); // Your code here console.timeEnd(‘myTimer’); // Outputs the time taken article

Quick Positioning with inset in CSS

/* Verbose way */ div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* With inset */ div { position: absolute; inset: 0; } article

Hiding DOM Elements with Ease

<p hidden>I’m invisible!</p> No need to rely solely on JavaScript to hide elements. Utilize the native HTML hidden attribute. This has a similar effect to display: none; in CSS, making the element disappear. article

Checking Network Speed

if (navigator.connection) { const downlink = navigator.connection.downlink; console.log(`Current download speed: ${downlink} Mbps`); } else { console.log(“Network Information API not supported”); } article

Preventing Text Pasting

<input type=”text”></input> <script> const input = document.querySelector(‘input’); input.addEventListener(“paste”, function(e){ e.preventDefault() }) </script> article

Prevent text selection CSS

User-select property – prevent text selection To prevent text selection, you can add CSS: p { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } on specific class .prevent-select {-webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ […]

CSS Comma-separated list

Comma-separated list Here’s a neat little trick that allows you to create a comma-separated list using just an HTML unordered list and a couple of lines of CSS. ul > li:not(:last-child):after { content: “, “; } In order for this to work you need to make sure to set the display property of the li tag to inline-block. <ul> <li>First […]

CSS External links

1. External links Styling external links can be done in several ways. One way to do this is by adding an extra class to all the external links. This is cumbersome and unnecessary since this can be done very easily by only using CSS. Let’s take a look at the following selector. a[href*=”//”]:not([href*=”yourwebsite.com”]) { /* […]

add external link icon before link

a[href*=”//”]:not([href*=”yourwebsite.com”]) { /* Apply style here */ } This CSS selector takes all a tags which href attribute contains two forward slashes (to filter out relative URLs) and which doesn’t contain the URL of your website. article

Create responsive image

Wrap image with relative padded parent. Keep image ratio with percentage on the padding property. Image is full size absolute child.