{"id":28339,"date":"2018-01-19T11:56:58","date_gmt":"2018-01-19T09:56:58","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=28339"},"modified":"2018-01-19T11:56:58","modified_gmt":"2018-01-19T09:56:58","slug":"crooked-style-sheets","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2018\/01\/19\/crooked-style-sheets\/","title":{"rendered":"Crooked Style Sheets"},"content":{"rendered":"\n

Crooked Style Sheets<\/a> is a proof of concept for\u00a0website tracking\/analytics using only CSS and without Javascript.<\/p>\n

What can we do with this method?<\/strong><\/p>\n

We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we can detect if a user opens a link or hovers with the mouse over an element. This can be used to track which (external) links a user visits and using the hover method. It should be even possible to track how the user moved their mouse (using an invisible table of fields in the page background). However, using my method it’s only possible to track when a user visits a link the first time or hovers over a field the first time. Maybe it’s possible to modify the method so that it is possible to track every click.<\/p>\n

Furthermore it is possible to detect if a user has installed a specific font. Based on this information it should be possible to detect, which OS a users uses (because different operating systems ship different fonts, e.g. “Calibri” on Windows).<\/p><\/blockquote>\n\n","protected":false},"excerpt":{"rendered":"\n

Crooked Style Sheets is a proof of concept for\u00a0website tracking\/analytics using only CSS and without Javascript. What can we do with this method? We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we can detect if a user … Continue reading Crooked Style Sheets<\/span><\/a><\/p>\n\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Crooked Style Sheets #WebDev #CSS #security #privacy #browsers","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[20,1517,384,200,1330],"keyring_services":[],"class_list":["post-28339","post","type-post","status-publish","format-standard","hentry","category-general","category-programming","category-technology","category-web-work","tag-browsers","tag-css","tag-privacy","tag-security","tag-web-development"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":9746,"url":"https:\/\/mamchenkov.net\/wordpress\/2005\/12\/08\/daily-del-icio-us-bookmarks\/","url_meta":{"origin":28339,"position":0},"title":"Daily del.icio.us bookmarks","author":"Leonid Mamchenkov","date":"December 8, 2005","format":false,"excerpt":"Shared bookmarks for del.icio.us user tvset on 2005-12-07 CSS PLaY : experiments with cascading style sheets -- An excellent collection of CSS solutions Tagged as: css design html ideas library programming reference scripts tips tools tricks web webdesign The Mercury Theatre on the Air Tagged as: art audio cool culture\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28880,"url":"https:\/\/mamchenkov.net\/wordpress\/2018\/10\/23\/having-fun-with-link-hover-effects\/","url_meta":{"origin":28339,"position":1},"title":"Having fun with link hover effects","author":"Leonid Mamchenkov","date":"October 23, 2018","format":false,"excerpt":"Any web developer knows how to apply CSS rules to style web page elements.\u00a0 Including links.\u00a0 Including hover effects (on mouse over).\u00a0 But I think most have never went far enough to explore the limits of this styling.\u00a0 \"Having fun with link hover effects\" goes exactly there, with some really\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/10\/css-500x278.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":28660,"url":"https:\/\/mamchenkov.net\/wordpress\/2018\/07\/08\/the-div-that-looks-different-in-every-browser\/","url_meta":{"origin":28339,"position":2},"title":"The div that looks different in every browser","author":"Leonid Mamchenkov","date":"July 8, 2018","format":false,"excerpt":"Martijn Cuppens tweets the link to this code snippet and a screenshot of how the code renders in different browsers.\u00a0 Yup.\u00a0 Each browser produces a different result.\u00a0 The Twitter thread has more examples. This is yet another example of how CSS and cross-browser compatibility can drive a web developer insane.","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div-500x333.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":28197,"url":"https:\/\/mamchenkov.net\/wordpress\/2017\/11\/08\/a-look-back-at-the-history-of-css\/","url_meta":{"origin":28339,"position":3},"title":"A Look Back at the History of CSS","author":"Leonid Mamchenkov","date":"November 8, 2017","format":false,"excerpt":"\"A Look Back at the History of CSS\" is a nice trip down the history lane as to where and how CSS came about.\u00a0 It's hard to imagine these days that CSS wasn't always around and the web looked like whatever your browser decided to make it look like.","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"Screenshot of Apple.com website","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2017\/11\/apple-500x420.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":9436,"url":"https:\/\/mamchenkov.net\/wordpress\/2005\/09\/11\/daily-del-icio-us-bookmarks\/","url_meta":{"origin":28339,"position":4},"title":"Daily del.icio.us bookmarks","author":"Leonid Mamchenkov","date":"September 11, 2005","format":false,"excerpt":"A fast one: Data Tables and Cascading Style Sheets Gallery Tagged as: code css design development gallery hacks html ideas programming reference tools web These were shared bookmarks for del.icio.us user tvset on 2005-09-10.","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":26370,"url":"https:\/\/mamchenkov.net\/wordpress\/2016\/08\/24\/web-developer-tools-from-browserling\/","url_meta":{"origin":28339,"position":5},"title":"Web Developer Tools from Browserling","author":"Leonid Mamchenkov","date":"August 24, 2016","format":false,"excerpt":"Browserling - an awesome cross-browser testing service, has a collection of Web Developer Tools, which are as simple to use as possible. \u00a0There are now more than 80 (!!!) tools, according to this Peteris Krumins blog post, that provide immediate help with things like converting dates and times, formats like\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"browserling-effortless-cross-browser-testing","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2016\/08\/browserling-effortless-cross-browser-testing.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/28339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=28339"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/28339\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=28339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=28339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=28339"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=28339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}