How to stop showing box that appears when mousing over Chrome tabs

A recent Chrome browser update brought “tab hover cards” which are small boxes that appear when you put your mouse on a tab. These boxes display the website’s “title” tag and domain name, as shown in the screenshot below.

Screenshot of Tab Hover Cards in Chrome
Screenshot of Tab Hover Cards in Chrome

For me, these tab hover cards started to annoy me, as they block part of the address bar, so I disabled them. See down below for steps on how to disable tab hover cards.

Steps to turn off tab hover cards in Chrome

  1. In the address bar, type in: chrome://flags/
  2. Do a CTRL + F to bring up the “Find” search box and type in: Tab Hover Cards
  3. When you find “Tab Hover Cards”, on the right there is a drop-down, change it from “Default” or “Enabled” to “Disabled”, and you are done

Take a full page screenshot in Chrome

Here’s a quick tip that I thought would be helpful for others (and myself in case I forget in the future). I needed to take a screenshot of a website in the Chrome web browser and I remembered there was an option in the Dev Tools to do this but I couldn’t find it.

So I searched around online and found an answer, which is pretty simple and quick without having to install any extensions. Here’s what to do:

  1. Open the Dev Tools (hitting the F12 key)
  2. Press the “Ctrl”, “Shift” and “P” keys at the same time
  3. Scroll down the list and find the light purple “Screenshot” rectangles and click the one with “Capture full size screenshot”
  4. A prompt will come up asking you where to save the screenshot and you are done

My thanks go to hackernoon.com for the answer to my problem.

No more CSS conditional comments for IE10+

I was working on an older site this past week and an issue came up where the IE10 web browser was showing different spacing compared to the Google Chrome web browser. My initial thoughts were to use CSS conditional comments to make a specific class have different padding for IE web browsers.

Well I didn’t know that Microsoft deprecated conditional comments for IE10 and above, so I did some searching online and found a blog post, “Targeting IE10 & IE11 Browsers with CSS” on paper-leaf.com, that gave me the solution I needed.

So if you use the below code inside a “style” tag and add your CSS specifically for IE10+ in there, it will solve this problem I ran into.

Testing your web site in different web browsers and mobile devices

When building your web site, at some point you should test how your site looks in different web browsers and mobile devices. To do this all you need is the Google Chrome web browser. Follow the steps below to test your site. The below steps were written while using Chrome version 33.0.1750.154. Future updates of Chrome may have the icons or tabs in different places.

  1. In Chrome, open the “Developer tools” via the button with the horizontal lines in the top right corner of the Google Chrome web browser
  2. Now with “Developer tools” open, in the bottom right corner click the round gears icon (the word “Settings” appears when you mouseover it)
  3. In the “General” tab, check the “Show ‘Emulation’ view in console drawer” checkbox and close that overlay
  4. With the “Developer tools” still open, in the bottom right corner click the icon with a greater than symbol and three lines (the words “Show drawer” appear when you mouseover it) and a new tab appears below the “Developer tools”
  5. Click the “Emulation” tab and now you can see how your web site looks in different mobile devices (in the “Device” tab), different screen sizes (in the “Screen” tab), and different user agents/web browsers (in the “User Agent” tab)