Optimizing layout and style

As you try to achieve an optimal layout for small screens such as those on BlackBerry smartphones, the Elements panel can be a very useful tool. The Elements panel allows you to view the DOM and trace style values for an element to see where values are applied, how they have been inherited, and where style values have been superseded. You can adjust style settings to tweak the appearance of the webpage components to achieve the desired result. The changes you make to the webpage are applied in near real time in the BlackBerry Browser, so you can see how your changes affect the appearance of the content. Once you achieve the results you want, you can propagate the updated values into the source file.

The Elements panel

You can click the Elements icon on the toolbar to display the Elements panel.

Elements icon

The Elements panel is divided into two sections. On the left is the document pane, which displays the DOM tree of the HTML source document. Each element is displayed as a separate node. You can expand the nodes of the DOM tree to view the children of a container element. The document pane of the Elements panel is a good tool to use to view the source of a page; because the panel displays the page as a tree, the document is easy to view and to navigate, even when the original webpage is minified or poorly formatted and difficult to read. Within the document pane, you can edit aspects of the DOM, such as attribute values or text.

On the right is a set of collapsible panes which display various pieces of information related to the element currently selected in the document pane. Some of these panes, such as the Computed Style pane and the Event Listeners pane, are informative; you use them simply to track information about the element. Other panes are editable, and allow you to change the styles or properties associated with the selected element. You can edit content in the following panes:
  • Styles: The Styles pane is divided into sections which show each matched CSS rule, and the associated style declarations. It also displays style values that have been inherited. Inherited values that have been overwritten by other style declarations are displayed with strikethough text.
  • Metrics: The Metrics pane provides a visual representation of the box model, which you can edit to optimize the layout of a container element on the screen. The box model refers to the amount of space a container element occupies in a rendered webpage. You can apply styles such as margins, borders, and padding to an element to adjust the size of the content block and improve the page layout.
  • Properties: The Properties pane allows you to view the page as it is viewed by JavaScript code, as a collection of DOM objects with associated property values. Although some of the property values are editable, in most cases, it is easier to edit style values in the Styles pane.

Inspect and modify element styles

  1. Click the Elements icon on the toolbar to display the Elements panel.
  2. In the document pane, locate and select the element for which you want to alter a style.
  3. In the data sidebar, expand the Styles pane to display the style declarations applied to the selected element.
  4. Perform any of the following actions:
    • To change the value for a style declaration, double-click the value in the Styles pane to make the value editable, and type the new value. You can use the Tab key to cycle through the declarations within a selector to modify more than one value.
    • To disable a style declaration, deselect the adjacent check box.
    • To add a new style declaration for a selector, double-click the white space below the last style declaration, and type the new declaration.
    • To modify the selector, double-click the selector, and type the new selector value.
  5. When you achieve the desired results, propagate the changes to the source document.

Inspect and modify the DOM

  1. Click the Elements icon on the toolbar to display the Elements panel.
  2. In the document pane, navigate to the node that you want to view or change.
  3. Perform any of the following actions:
    • To change the value of an attribute, double-click the value in the document pane to make the value editable and type the new value. You can use the Tab key to cycle through each of the element's attributes to modify more than one value.
    • To change an attribute name, double-click the attribute name and type the new value.
  4. When you achieve the desired results, propagate the changes to the source document.

Modify the box model for an element

  1. Click the Elements icon on the toolbar to display the Elements panel.
  2. In the Elements panel, expand the Metrics pane to display the box model associated with the selected element.
  3. Click any of the top, bottom, left, or right values and type the new value. The changed value is propagated to the associated style declaration in the Styles pane.
  4. When you achieve the desired results, propagate the changes to the source document.

Last modified: 2014-03-10



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus