Codehints

Fix SVG in <img> tags not scaling in IE9, IE10, IE11

Anish M Alias

Jul 24^th, 2018

0

CSS

Fix SVG in tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers. Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src$=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%; 
  }
}

Website

More

Anish M Alias

Jul 4^th, 2018

0

CSS , CSS3

CSS Filter

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

CSS

filter: <filter-function> [<filter-function>]* | none

Where is one of:

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() - for applying SVG filters
custom() - "coming soon"

Website

More

Auto-fill issue in floating input (Material Design)

Anish M Alias

Mar 20^th, 2018

0

CSS

Auto-fill issue in floating input (Material Design)

The new selector is something like this: .form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label By adding the following lines to my site's CSS file it fixes the issue

.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label {
    top: -30px;
    left: 0;
    font-size: 12px;
    line-height: 1.07142857;
}

More

Anish M Alias

Feb 26^th, 2018

9

CSS , Developer

CSS Hacks Targeting Firefox

Firefox specific styling is now possible with CSS alone. No more JS hacks required.

#Firefox 2

html>/**/body .selector, x:-moz-any-link { color:lime; }

#Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default { color:lime; }

#Any Firefox

@-moz-document url-prefix() { .selector { color:lime; } }

Website Thank you so much Nidhin for giving us such an effective Mozilla specific info.

More

IE10 stop scroll bar from appearing over content and disappearing

Anish M Alias

Nov 7^th, 2017

2

CSS

IE10 stop scroll bar from appearing over content and disappearing

If you go to any website with content that causes a vertical scroll bar in ie10 (desktop). You'll notice that the scroll bar only appears when you hover over the window.

html {
   -ms-overflow-style: scrollbar;
}

More

Anish M Alias

Sep 13^th, 2017

0

CSS , CSS3

A simple example of CSS Variable

CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. CSS is going to be like a CSS pre-processor itself such as SASS, LESS in the future. CSS variables are now officially part of the CSS specification

:root {
--main-color: #F06D06;
}

.main-header {
color: var(--main-color);
}
.main-footer {
background-color: var(--main-color);
}

More

Anish M Alias

Sep 10^th, 2017

0

CSS , HTML 5 , Sass

Differences Between Bootstrap 3 and 4

Bootstrap 4 brought some major changes, adding new components, scrapping others. Here's the difference between Bootstrap 3 and Bootstrap 4.

Component	Bootstrap 3	Bootstrap 4
Global
Source CSS Files	LESS	SCSS
Primary CSS Unit	`px`	`rem`
Media Queries Unit	`px`	`px`
Global Font Size	`14px`	`16px`
Default Fonts	Helvetica Neue, Helvetica, Arial, sans-serif	Uses a "native font stack" (user's system fonts), with a fallback to Helvetica Neue, Arial, and sans-serif
Grids
Grid Tiers	4 tier grid system (xs, sm, md, lg)	5 tier grid system (xs, sm, md, lg, xl). Bootstrap 4 has removed the `xs` from the lowest break point. Therefore, `col-*` covers all devices (no need to specify the size in this case).
Offsetting Columns	Uses `col--offset-` classes to offset columns. For example, `col-md-offset-4`.	Uses `offset--` classes to offset columns. For example, `offset-md-4`.
Tables
Inverse Tables	Not supported.	Added inverse tables with the `.table-inverse` class.
Table Head Styles	Not supported.	Added table head styles with the `.thead-default` and `.thead-inverse` classes.
Condensed Tables	`.table-condensed`	`.table-sm`
Contextual Classes	Bootstrap 3 doesn't use the `.table-` prefix for its contextual classes. For example, Bootstrap 3 uses `.active` whereas Bootstrap 4 uses `.table-active`. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger).	Added the `.table-` prefix for its contextual classes.
Responsive Tables	The `.table-responsive` class must be added to a parent `div` element.	Can add `.table-responsive` to the actual `table` element.
Reflow Tables	Not supported.	~~Added reflow tables with the `.table-reflow` class.~~ Reflow tables have now been dropped.
Forms
Horizontal Forms	Horizontal forms require the `.form-horizontal` class. Forms don't require `.row` when using grids (although this class is still a requirement on Bootstrap 3 grids in general).	Bootstrap 4 dropped the `.form-horizontal` class — it is no longer needed to display horizontal forms. Forms require the `.row` class when using grids.
Horizontal Forms	Use `.control-label` when using grids for form layout.	Bootstrap 4 uses `.col-form-label` * when using grids for form layout. * Note that Bootstrap 4 initially used `.form-control-label` but subesquently changed this to `.col-form-label`.
Checkboxes and Radio Buttons	Uses `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline` to display checkboxes and radio buttons.	Uses `.form-check`, `.form-check-label`, `.form-check-input`, and `.form-check-inline`.
Form Control Size	Use `.input-lg` and `.input-sm` to increase or decrease the size of an input control.	Use `.form-control-lg` and `.form-control-sm` to increase or decrease the size of an input control.
Help Text	Use the `.help-block` class to display help text.	Bootstrap 4 uses the `.form-text` class to display help text. ~~Bootstrap 4 forms don't have an official class for help text. Instead, the `.text-muted` class was introduced for more flexibility.~~
Validation and Feedback Icons	Includes validation styles for error, warning, and success states on form controls (for example, `.has-warning`). To present icons on the input fields using Bootstrap 3, use glyphicons.	Validation styles are not available for Bootstrap 4 forms. Use custom Bootstrap form validation messages instead.
Legends	No classes for styling the form legends.	Provides the option of using `.col-form-legend` on `legend` elements to style it more like a label.
Custom Forms	Not supported.	Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.
Buttons
Styles	Includes the `.btn-default` and `.btn-info` classes. The `.btn-secondary` class isn't available in Bootstrap 3.	Introduced the `.btn-secondary`, `.btn-light`, and `.btn-dark` classes. Dropped the `.btn-default` class. Note that the `.btn-info` class was initially dropped in Bootstrap 4 but then reappeared again.
Outline Buttons	Not supported.	Introduced the `.btn-outline-` classes for styling buttons with an outline color. ~~Introduced the `.btn--outline` classes for styling buttons with an outline color.~~ (The `.btn--outline` classes became `.btn-outline-` in Alpha 3).
Button Sizes	The `.btn-xs` class is available.	Dropped the `.btn-xs` class (only `.btn-sm` and `.btn-lg` are available now).
Images
Responsive Images	Use `.img-responsive` class.	Use `.img-fluid` class.
Image Alignment	Use `.pull-right`, `.pull-left`, and `.center-block` helper classes.	Uses `.m-x-auto` instead of `.center-block` to align block-level images. Can also use the various `.pull--right` and `.pull--left` responsive helper classes, as well as the `.text--left`, `.text--center`, and `.text--right` helper classes on the image's parent. Can use the various `.pull--none` classes to disable floating.
Media Objects
Classes	Includes many different classes for media objects, including `.media`, `.media-body` `.media-object`, `.media-heading`, `.media-right`, `.media-left`, and `.media-list` and `.media-body`.	Uses just `.media` class. Margins can be applied using spacer utilities. Media objects are flexbox enabled in Bootstrap 4, so the various flexbox classes can also be applied (such as reordering, etc).
Dropdowns
Structure	Apply dropdowns to lists (i.e. using `ul` and `li`).	Dropdowns can be built with `ul` or `div`s. Apply the `.dropdown-item` to a `a` or `button` element and wrap them all in a `div` (or `ul`) with a `.dropdown-menu` class applied.
Menu Headers	Apply `.dropdown-header` to the `li` tag.	Apply `.dropdown-header` to `h1` - `h2` tags (as Bootstrap no longer uses `li` tags to build dropdowns).
Dividers	Apply the `.divider` class to the `li` element (because it used lists to build dropdowns).	Apply the `.dropdown-divider` to the `div` element.
Disabled Menu Items	Apply the `.disabled` class to the `li` element.	Apply the `.disabled` class to the `a` element.
Button Groups
Justified?	Supports justified button groups (via the `.btn-group-justified` class).	Not supported.
Extra Small?	Supports extra small button groups (via the `.btn-group-xs` class).	Not supported (dropped the `.btn-group-xs` class).
Navs
Inline Navs	There is no `.nav-inline` class.	Can use the `.nav-inline` class to explicitly specify navs to be displayed inline.
Navbars
Colors	Limited (preset) color options. Supports inverse navbars but not the other classes.	New (preset) color options. Introduced the `.navbar-light` and the `.navbar-dark` classes, and allows the `.bg-*` classes to be used on navbars.
Navbar Alignment	Use `.navbar-right`, `.navbar-left` to align components within the navbar.	~~Use the various `.pull--right` and `.pull--left` responsive helper classes.~~ ~~Can also use the various `.pull-*-none` classes to disable floating.~~ Can either use spacing utilities such as `.mr-auto`, or any of the flexbox alignment utilities.
Navbar Forms	Add the `.navbar-form` class to forms within navbars.	Bootstrap 4 dropped the `.navbar-form` class. It's no longer necessary.
Fixed Navbars	Uses `.navbar-fixed-top` and `.navbar-fixed-bottom` to fix navbars to the top or bottom.	Uses `.fixed-top` and `.fixed-bottom`.
Pagination
Default Pagination	Only requires `.pagination` to be added (to the `ul` element that represents the list of pages).	Must also add `.page-item` to each `li` element and `.page-link` to each `a` element.
Pagers	Uses `.previous` and `.next` for aligning pagers.	Pagers have been dropped in Bootstrap 4 (Alpha 3). ~~Uses `.pager-prev` and `.pager-next` for aligning pagers.~~
Labels
Pill Labels	The `.label-pill` class is not available. However, Bootstrap 3 does have badges (which achieves a similar visual effect).	Labels have been replaced by badges in Bootstrap 4. Badges can use the `.badge-pill` for rounded corners.
Tags
Supported?	No. "Tags" are called "Labels" in Bootstrap 3 (i.e. they use the `.label` class).	~~Yes.~~ ~~The `.tag` class was introduced in Bootstrap 4 (Alpha 3) to replace the `.label` class.~~ ~~This was done to disambiguate from the `label` element.~~ Tags have now been renamed to "badges". These replace labels from Bootstrap 3.
Jumbotron
Full-Width	The `.jumbotron-fluid` class is not required on full-width jumbotrons.	Introduced the `.jumbotron-fluid` class for full-width jumbotrons.
Progress Bars
Uses `progress`?	Doesn't use the `progress` for progress bars. Instead, applies progress bar classes to nested `div` elements.	~~Uses the HTML5 `progress` element when working with progress bars.~~ Using the `progress` element was abandoned in Alpha 6. Bootstrap 4 now uses the `div` element again.
Glyphicons
Supported?	Supported.	Not supported.
Typography
Blockquotes	Bootstrap styles are applied to the `blockquote` element by default.	Introduced the `.blockquote` class for styling the `blockquote` element (i.e. styling this element is now opt-in).
Blockquote Alignment	Use `.blockquote-reverse` to align a blockquote to the right.	Use the text utilities to align blockquotes (`.text-center` and `.text-right`).
Page Headers	The `.page-header` class is supported.	The `.page-header` class is not supported.
Description Lists	The `.dl-horizontal` class was used to declare a horizontal list.	Horizontal lists are now declared with the `.row` class on the `dl` tag, then any of the grid system's predefined classes to the `dt` and `dd` tags.
Non-Responsive Usage
Supported?	Supported. You can specify a layout to be non-responsive.	Not supported.
List Groups
Linked List Items / Button List Items	Apply `.list-group-item` to the `a` element.	Apply `.list-group-item-action` to the `a` element.
Collapse
Show content	Uses `.in` to have content expanded upon page load.	Uses `.show` to have content expanded upon page load.
Cards
Supported?	Not supported.	Introduced in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails.
Panels
Supported?	Supported.	Not supported. Use cards instead.
Wells
Supported?	Supported.	Not supported. Use cards instead.
Thumbnails
Supported?	Supported.	Not supported. Use cards instead.
Breadcrumbs
Classes	Uses the `.breadcrumb` class against the `ul` tag.	Also requires `.breadcrumb-item` to be applied against all `li` elements that make up the breadcrumb. Breadcrumbs can also be used outside of lists. For example, the `.breadcrumb-item` could be applied to a bunch of `a` elements that are wrapped in a `.breadcrumb` element.
Carousels
Carousel Item	Use `.item` class.	Use `.carousel-item` class.
Affix
Supported?	Yes.	No.

Website

More

Folder Preview Ideas using CSS and Javascript

Anish M Alias

May 29^th, 2017

1

CSS , CSS3 , Designs , HTML , HTML 5

Folder Preview Ideas using CSS and Javascript

Some ideas for previewing or just playing with folders on hover. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what's inside.

Website Example

More

Anish M Alias

Jan 23^rd, 2017

0

CSS , CSS3

The revert CSS keyword

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

<body>
  <div>Hello, world!</div>
  <div class="unset">Hello, monkey!</div>
  <div>Hello, watermelon!</div>
</body>

body {
  background-color: #F5F5F5;
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div {
  background-color: #C0C0C0;
  color: #006400;
  font-family: Georgia, Times, Times New Roman, serif;
}
.unset{
  all:unset;
}

See the Pen The unset CSS by Anish M Alias (@anishmalias) on CodePen.

Demo More Info

More

Anish M Alias

Jan 14^th, 2017

0

CSS , CSS3 , HTML 5

Bootstrap Dropdown Slidemorph Menu

Bootstrap Dropdown Slidemorph Menu inspired by Youtube context menus within a video player. Transitions between submenus create very neat experience. Also, menu provides information about selected values for each item.

Website

More

STYLE SWITCHER

CSS

CSS

Where is one of:

#Firefox 2

#Firefox 3

#Any Firefox