CSS Properties - Inherit, Initial and Unset Values

All CSS properties have 3 basic values in common: inherit, initial and unset.

Here is quick summary for these values:

• initial: The default value for the property (the browser default).
• inherit: Get the property from the parent element.
• unset: Acts as either inherit or initial. It’ll act as inherit if the parent has a value that matches, or else it will act as initial.

Example CSS:

    <style>
        div {
            color: red;
            font-size:larger;
        }

        .some-design {
            color: blue;
        }

        .unset {
            color: unset;
        }

        .initial {
            color: initial;
        }
    </style>

Example HTML:

    <div>
        <div>Text in this (parent) div element is red.</div>
        <div class="some-design">This div's css make it blue.</div>
        <div class="unset">(color => unset): The color is unset 
             (red, because it is inherited from the parent div).</div>
        <div class="initial">(color => initial): The color is initial 
             (black, the browser default).</div>
    </div>

It will display the output like:

JS Geolocation API – Use watchPosition()

The watchPosition() method of the Geolocation interface is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function.

This method retrieves periodic updates about the current geographic location of the device, allows to detect a change in position of device. The location object contains geographic coordinates with information about speed.

Like we have 3 parameters in getCurrentPosition() method, watchPosition() accepts the same:

• success: A callback function that retrieves the location information.
• error (Optional): An optional callback function that takes a GeolocationPositionError object as an input parameter.
• options (Optional): This optional parameter specifies a set of options for retrieving the location information.

  You can specify:

  • Accuracy of the returned location information
  • Timeout for retrieving the location information
  • Use of cached location information

Return value: An integer ID that identifies the registered handler. The ID can be passed to the Geolocation.clearWatch() to unregister the handler and stop receiving location updates.

Example Code:

function onSuccess(position) {
	//do something with position data.
	console.log("Latitude: " + position.coords.latitude);
	console.log("Longitude: " + position.coords.longitude);
}

function onError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      console.log("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      console.log("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      console.log("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      console.log("An unknown error occurred.");
      break;
  }
}

// Options: throw an error if no update is received every 30 seconds.
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 30000 });

Related Post(s):

• JS Geolocation API – Get a User's Location
• JS Geolocation API – getCurrentPosition with options parameter

JS Geolocation API – getCurrentPosition with options parameter

In the last post (JS Geolocation API – Get a User's Location) we have covered navigator.geolocation.getCurrentPosition() method to get user's location. We have used the success and error callbacks to receive the position object or report error.

The method getCurrentPosition() also accepts an options object as third paramter (optional).

This options object allows you to specify:

• enableHighAccurancy (default false): if set to true, response is slower and more accurate.
• maximumAge (default 0): milliseconds when cached value is valid, the device may decide to use valid cached data instead of sensor measure. Represents age for the returned position value (up until this age it will be cached and reused if the same position is requested again, after this the browser will request fresh position data)
• timeout (default infinity): milliseconds before the API gives up and calls the error handler (the second parameter).

The example below calls getCurrentPosition() with both success and error callbacks, and pass the options object in third argument:

var options = {
  enableHighAccuracy: true,
  timeout: 5000, //timeout 5 seconds
  maximumAge: 10000 //(location) age 10 seconds
};

navigator.geolocation.getCurrentPosition(success, error, options);

Related Post(s):

• JS Geolocation API – Get a User's Location

JS Geolocation API – Get a User's Location

The JavaScript Geolocation API provides access to geographical location data associated with a user's device. This can be determined using GPS, WIFI, IP Geolocation and so on.

Geolocation is most accurate for devices with GPS, like smartphones.

To protect the user's privacy, it requests permission to locate the device. If the user grants permission, you will gain access to location data such as latitude, longitude, altitude and speed etc.

The Geolocation API is available through the navigator.geolocation object.

If the object exists, geolocation services are available. You can test for the presence of geolocation:

if ("geolocation" in navigator) {
  console.log("geolocation is available");
} else {
  console.log("geolocation is not available");
}

navigator.geolocation object provides the method getCurrentPosition() to return the user's position.

There are three possible arguments with this method:

• A success callback (required)
• An error callback (optional)
• An options object (optional)

The example below calls getCurrentPosition() with both success and error callbacks, and returns the latitude and longitude of the user's position:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(usePositionData, useError);
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}

function usePositionData(position) {
	//do something with position data.
	console.log("Latitude: " + position.coords.latitude);
	console.log("Longitude: " + position.coords.longitude);
}

function useError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      console.log("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      console.log("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      console.log("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      console.log("An unknown error occurred.");
      break;
  }
}

Related Post(s):

• JS Geolocation API – getCurrentPosition with options parameter

CSS - Using media query features

Media Query features define the style for specific characteristics of a given user agent, output device, or environment.

Media features can be either range or discrete.

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media print and (orientation: portrait) {
  colod: red;
}

Many range features can be prefixed with min- or max- to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1000px:

@media (max-width: 1000px) {
  colod: blue;
}

An alternative syntax for above condition is to use ordinary mathematical comparison operators >, <, >=, or <=.

@media (width <= 1000px) {
  colod: blue;
}

@media (width <= 1000px) is the equivalent of @media (max-width: 1000px).

These are some other commonly used media features:

• orientation: Orientation of the viewport (landscape or portrait)
• max-height: Maximum height of the viewport
• min-height: Minimum height of the viewport
• height: Height of the viewport (including scrollbar)
• max-width: Maximum width of the viewport
• min-width: Minimum width of the viewport
• width: Width of the viewport (including scrollbar)

Related Post(s):

• CSS - Using media queries