{"id":18681719,"url":"https://github.com/stowball/layout-engine","last_synced_at":"2025-07-09T07:37:51.323Z","repository":{"id":6462303,"uuid":"7702084","full_name":"stowball/Layout-Engine","owner":"stowball","description":"Adds the rendering engine name as a class on the html tag and returns a JavaScript object containing the vendor, version and browser name (where appropriate)","archived":false,"fork":false,"pushed_at":"2019-02-25T09:32:55.000Z","size":23,"stargazers_count":97,"open_issues_count":0,"forks_count":18,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-11T12:41:45.516Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":"http://mattstow.com/experiment/layout-engine/demo.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stowball.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-19T10:51:54.000Z","updated_at":"2024-09-03T16:16:17.000Z","dependencies_parsed_at":"2022-08-31T04:22:51.055Z","dependency_job_id":null,"html_url":"https://github.com/stowball/Layout-Engine","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2FLayout-Engine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2FLayout-Engine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2FLayout-Engine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2FLayout-Engine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stowball","download_url":"https://codeload.github.com/stowball/Layout-Engine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223494299,"owners_count":17154527,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript"],"created_at":"2024-11-07T10:09:05.828Z","updated_at":"2024-11-07T10:09:06.418Z","avatar_url":"https://github.com/stowball.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Layout Engine\n\n### Browser detection done right\n\n#### Adds the rendering engine and browser names as a class on the html tag and returns a JavaScript object containing the vendor, version and browser name (where appropriate)\n\nLayout Engine uses feature detection so there can never be a false positive* and vendors cannot be spoofed. It's the **simplest and most reliable** way to target **Edge**, **IE11** and **IE10**.\n\nThe following layout engines are detected: `edge`, `ie`, `khtml`, `mozilla`, `opera` \u0026 `webkit`\n\nThe following versions are detected: `ie-` `11`, `10`, `9`, `8`, `7` \u0026 `opera-` `mini`\n\nThe following WebKit browsers are detected: `android`, `chrome` *(includes Opera Blink and Android 5+ WebView)*, `safari`, `safari-ios` \u0026 `wiiu`\n\nUp to 3 classes are applied to `\u003chtml\u003e` with the syntax: `.vendor-vendor_name`, `.vendor-vendor_name-version` *(optional)* and `.browser-browser_name` *(optional)*.\n\nA JavaScript object with up to 3 properties is exposed: `layoutEngine.vendor`, `layoutEngine.version` *(optional)* and `layoutEngine.browser` *(optional)*.\n\nLayout Engine will also identify the default Android v2-4 Browser (and its WebView variants), by adding a class of `browser-android` to `\u003chtml\u003e`. Unfortunately, it has to use UA sniffing to do so. Anyway… why might you need to detect the Android Browser? Applying a border or background to `\u003cselect\u003e`s makes them render as text inputs. Also, AOSP Browser's radio buttons and checkboxes are very badly positioned compared to other browsers.\n\n---\n\n**Demo and Further Info:**\n\n* Test page: http://mattstow.com/experiment/layout-engine/demo.html\n* Blog post: http://mattstow.com/layout-engine.html\n\n---\n\n**Usage:**\n\n1. Reference layout.engine.min.js in the `\u003chead\u003e` of your document\n\n2. In your CSS, use a vendor `class` to style elements appropriately, e.g.:\n```css\n.vendor-ie-10 {\n\tline-height: 20px; /* 1px more than IE 8 */\n}\n\n.browser-safari-ios .text-input {\n\tfont-size: 16px; /* Prevent zooming in on iOS form inputs */\n}\n```\n\n3. If appropriate, in your JavaScript, use `layoutEngine.vendor`, `layoutEngine.version` and `layoutEngine.browser` to run conditional functions where relevant, e.g.:\n```js\nif (layoutEngine.vendor === 'ie' \u0026\u0026 layoutEngine.version === 10) {\n\t// Conditional script\n}\n```\n\n---\n\n**Caveats:**\n\nIE 8, 9 and 10's Browser and Document Modes incorrectly detect IE 7 as IE 8. Real IE 7 works as intended, however.\n\nIE 6 cannot be detected with Layout Engine. I recommend using IE Conditional Comments to target IE 6 and 7 instead.\n\n---\n\nMinified version created with [Online JavaScript/CSS/HTML Compressor](http://refresh-sf.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Flayout-engine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstowball%2Flayout-engine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Flayout-engine/lists"}