Kompx.com or Compmiscellanea.com

Pure CSS responsive square

Windows : Internet Explorer 8.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ], NetSurf 3.0+, Hv3.

Responsive CSS square. No JavaScript / jQuery. Example:

 

HTML / XHTML. Code:

<div class="square">&nbsp;</div>

CSS. Code:

.square {width: 10%; height: 0; padding-bottom: 10%;}

/* Extra CSS, just styling the look: */

.square {background: #fd0;}

Width: 10% makes the .square div to be 10% of the parent element's width. Height: 0 eliminates any height the element may have, letting padding-bottom: 10% to make it exactly equal to the width. So each time the width of the parent container is changed, the element's size gets recalculated.

Based on the concept - CSS grid with responsive square cells:

Square cell 1
Square cell 2
Square cell 3
Square cell 4
Square cell 5
Square cell 6
Square cell 7
Square cell 8

[ 1 ]

As well as Netscape 6.01+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 6.01+, Mozilla 0.6+.


Aliosque subditos et thema

 

ELinks. Use

 

Jump to: ELinks - Text-based or console web browser. Description: features, screenshots, download links. ELinks. Configuration - How to configure ELinks. Once started, ELinks allows a user to do almost all it is capable of by means of its menu. So it is only how to start ELinks and how to do several other things as an example that is explained here. 1 ) Starting ELinks - ELinks may be run under a GUI environment (X Windows, MS Windows, etc) or some command-line interface. In the first case a terminal emulator / console must be opened before ELinks is to be started: xterm, rxvt, Win32 console and others: ELinks ( Linux ) - To start ELinks, enter command: elinks - To start ELinks opening a web document from Internet: elinks Web address of a web document - To start ELinks accessing hard disk to browse local folders: elinks file:/// or: elinks / - To start ELinks opening a local folder: elinks file:///home/user1/ or: elinks /home/user1/ - To start ELinks opening a local file: elinks file:///home/user1/document1.htm or: elinks /home/user1/document1.htm ELinks ( Windows ) - To start ELinks, enter command: elinks - To start ELinks opening a web document from Internet: elinks Web address of a web document - To start ELinks accessing hard disk to browse local folders: elinks file:/// - To start ELinks opening a local folder: elinks file://c/home/user1/ - To start ELinks opening a local file: elinks file://c/home/user1/document1.htm 2 ) To access the menu of ELinks: Press Esc on keyboard 3 ) Opening a web document in ELinks already running: Press g on keyboard or Esc --> File --> Go to URL --> [ Enter a web address ] --> Enter 4 ) Going back: Left arrow of Arrow keys on keyboard or Esc --> File --> Go back 5 ) Opening a link in a new tab in background: Shift - t or Esc --> Link --> Open in new tab in background 6 ) Going to the next tab: Shift - > or Esc --> View --> Next tab 7 ) Closing a tab: Press c on keyboard or Esc --> View --> Close tab 8 ) Passing a URI to an external application when running ELinks in a terminal emulator. There are many applications it is possible to pass a URI to, here it is about passing a URI to clipboard.

CSS. Target Opera only

 

CSS targeting Opera web browser only: This text is red in Opera HTML / XHTML. Code: <p>This text is red in Opera</p> CSS. Code: doesnotexist:-o-prefocus, p {color: #f00;} The -o-prefocus pseudo-class allows styling elements for Opera browser only. The code is placed in the common CSS file, not in a separate one as it is in case of Internet Explorer conditional comments. Source: http://www.opera.com/docs/specs/presto2.12/css/o-vendor/ [ 1 ] Opera 3.5 - 5.0 ignores "doesnotexist:-o-prefocus" and reads code as p {color: #f00;}. Opera 6.0 - 9.4 ignores the whole code starting "doesnotexist". [ 2 ] Internet Explorer 5.5+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+, Netscape 7.2+, Mozilla 1.5+ ignore the whole code starting "doesnotexist". Older browsers like Internet Explorer before 5.5 or Netscape before 7.2 or Mozilla before 1.5 seem to ignore the uncommon, Opera 9.5+ specific code ("doesnotexist:-o-prefocus") and apply styles to what they understand - here it is the p tag; making the text in it red. [ 3 ] The text is red in Dillo 3.0.1 as well.