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