CSS3 – Introduction

متابعى مدونة فريق ديف ميكس الأعزاء .. بعد التحية .. نقدم لكم مجموعة من المقالات فى  السي اس اس 3 متابعة لسلسلة الويب والتى تم الاعلان عنها منذ فترة وقررنا الكتابة فى هذا الجزء باللغة العربية تقديرا لرغبة القراء واثراءا لمحتوى اللغة العربية على الانترنت ونتمنى ان تنال اعجابكم

فى هذا المقال تقرأون

مقدمة
بعض الاحصائيات عن دعم المتصفحات للسي اس اس 3
ما الجديد فى السي اس اس 3 ؟
ملاحظات لابد ان تأخد فى الاعتبار

Top

---

مقدمة
الى الجحيم بهذه المتصفحات .. كلمة قالها جيفيري زيلدمان سنة 2001 ومن بعدها بدأت ثورة التطوير الحقيقي لمتصفحات الويب والسبب فى ذلك هو تحول مصممي صفحات الويب لاستخدام السي اس اس 1 فى اشياء اكثر من الالوان والخطوط واصبحت المتصفحات فقيرة لدعم الخصائص التى يرديها المصممون.
فى 2006 بدأ الكلام عن دعم السي اس اس يقل حيث ان معظم المشكلات التى كانت تظهر ، تم حلها من قبل المتصفحات واصبحت المتصفحات تتطور بشكل اسرع خصوصا فايرفوكس وسفاري ، وفى نهاية الامر .. المتصفحات تتطور بتطور لغات الويب الخاصة بالديزاين مثلا السي اس اس  والاتش تي ام ال.
Top

---

بعض الاحصائيات عن دعم المتصفحات للسي اس س 3
لم تدعم كل المتصفحات السي اس اس 3 بشكل كامل وهناك ما يدعم بعض الخصائص ولا يدغم بعضها واليكم جدول بدعم المتصفحات لبعض الخصائص الجديدة فى سي اس اس 3
اذن لا يزال الدعم مستمر فى الاصدارات القادمة من المتصفحات
Top

---

ما الجديد فى السي اس اس 3 ؟

Borders

هناك الكثير والكثير جديد فى السي اس اس 3 مما سهل مهمة مصممي المواقع ومنها ميزة الحدود فتستطيع إختصار ما كنت تفعله في الإصدارة الثانية إذا كنت تريد عمل حواف دائرية لصندوق عن طريق الحدود في السي اس اس أو إستبدال الحدود بصورة من الصور كما هو موضوح بالصورة:

ففى الاصدار الثانى كنا نستخدم اربع صور مختلفة للحواف الاربعة داخل صندوق ملون عادي ولكن فى الاصار الجديد تستطيع ببساطة ان تفعل نفس الموضوع وبكفاءة اكبر عن طريق ميزة
border-radius
واللى تمكنك من عمل حواف دائرية بسهولة جرب لكود التالي

HTML code

</pre>
<div id="Box">
<h1>عنوان</h1>
نص مكتوب للتجربة</div>
<pre>

CSS code

#box{
text-align:right;
margin: 10px auto;
padding: 7px;
width: 238px;
height: auto;
background-color: #e6e9ed;
border: 1px solid #666666;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-opera-border-radius: 10px;
}

RGB Color system
RGB  بالتأكيد أسهل بكثير مما سبق ومن الجديد ايضا خاصية تغيير الالوان بصيغة ال
انظر المثال التالى

ايضا ينطبق نفس الشكل فى الانظمة الاخرى مثل
(CMYK,HSL,HSLA)

Fonts
من الاشياء الجديدة والمفيدة جدا استخدام فونتس جديدة باستخدام ميزة جديدة اسمها
@font-face
وتستخدمها بالشكل التالى
CSS code

@font-face {
font-family: "devmixfont";
src: url('atlandsketchesbb_reg.TTF');
}
h1 {
font-family: "devmixfont";
color: #3e87f5;
font-size:100px;
}

HTML code

<h1>DevMix Team</h1>
<p>
DevMix Team was founded in February 2011 and it is the best
teamwork in Mansoura Universty collected by students, we are the best
</p>

فتكون النتيجة كالتالى

ملحوظة: تقدر تنزل اى فونت من هنا

Shadow

إضافة جديدة وجميلة تساعد على وضع ظل للنصوص والعناصر أو الصناديق الاتش تي ام ال أيضاً ، هذه الظلال يكون تكوينها عن طريق خاصية

box-shadow و text-shadow

ويمكن حساب قيمها بهذه الطريقة:

مصدر الصورة

هيا بنا نرى مثال ونتيجة له ، جرب الكود التالى
HTML code

<div id="Box">
<h1>فريق ديف ميكس</h1>
فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات
 .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه</div>

CSS code

#box {
padding: 13px;
margin: 0 auto;
width: 450px;
text-align: left;
background-color: #e9ecf2;
-moz-box-shadow: 7px 7px 10px #9c9c9c;
-webkit-box-shadow: 7px 7px 10px #9c9c9c;
-o-box-shadow: 7px 7px 10px #9c9c9c;
}

وتكون النتيجة عمل ظل للصندوق كما فى الصورة التالية

اما عن عمل ظل للكلام والذي يعطى تنسيقا متميز للكلام انظرالكود والنتيحجة التاليين
CSS code

h1, p {
text-shadow: 3px 2px 7px #9f9f9f;
}

HTML code

<h1>فريق ديف ميكس</h1>
<pre>
فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات
 .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه

فتكون نتيجة هذا الكود كالتالى
يوجد الكثير من الخصائص الجديدة الاخرى والتى سوف يثم مناقشتها فى الدروس والمقالات القادمة باذن لله مثل

• Transitions
• opacity
• Multiple Backgrounds
• Animation
• and more …

Top

---

ملاحظات لابد ان تأخد فى الاعتبار
لم يدعم كل المنتصفحات كل الخصائص بنفس الطريقة لذلك فى كتابة السي اس اس 3 يعتبر اختلاف دعمهم للخصائص احدالعيوب والتى تكلفك كتابة الخاصية اكثر من مرة ولعلكم رأيتم اكثر من مرة فى الامثلة كتابة الخاصية ببعض الحروف قبلها انظر الصورة بكل متصفح وامامه الكلمة المختصرة المستخدمة فى السي اس اس 3 مع خصائصها

border-radius   ومثال على خاصية الحدود الدائرية

-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-ms-border-radius:10px;
-chrome-border-radius:10px;

وفى النهاية اتمنى ان اكون قد اوصلتك لبعض خصائص السي اس اس 3 المهمة وعرضت عليك مقدمة تجعلك تستخدم السي اس اس 3 اليوم قبل غدا وانتظروا باقى مقالاتنا فى القريب العاجل باذن الله ننتظر تعليقاتكم ومقترحاتكم .. بالتوفيق:)

CSS3 .. Track II of web with DevMix Team

السلام عليكم ورحمة الله وبركاته

كما وعدناكم من قبل مع سلسلة الويب والتى بدأت بمجموعة من المقالات فى الــ
HTML5
مستمرين معكم فى نفس السلسلة .. ويسر فريق ديف ميكس ان يعلن عن الآتى

CSS 3

مجموعة اخرى من المقالات التقنية فى مجال الويب نهتم فيها بمحتوى هذا الكتاب الذي سوف نعتبره الماتيريال الخاصة بهذا التراك ..عن السي اس اس 3

حيث انه تم نشر 3 مقالات فى الفيرجن 2 من نفس اللغة والتى تعتبر فى المقام الاول ليست لغة برمجة انما هى طريقة لتنسيق صفحات الويب

انتظروا فى اقرب وقت جدول بالمقالات القادمة فى هذا التراك .. ممكن تنزلوا الكتاب ده من اللينك ده

CSS–Advanced Topics

Alsalamo alekom .. we will continue what we started which is css reviews … so u have to check this links befour we start CSS Basics || and CSS Basics | Now we will talk about something advanced about CSS .. our topics will be

• CSS – Cursor

• CSS – Position

• CSS – Layer

• CSS – Display

CSS – Cursor

we will change cursor icon when we do action like “we are over text” we have many cursors like :

• default – Display the normal mouse cursor

• iconwait – The mouse icon to represent the computer “thinking”

• crosshair – A cross hair reticletext – An “I” shaped icon that is displayed when selecting textpointer

• A hand icon that you see when you hover over an
  HTML link-help

• A question mark (usually)

Lets Try it now .. Just make Style tag and copy this :

 p { cursor: wait }
 h4 { cursor: help }
 h5 { cursor: crosshair }

and make your mouse over each one and see what happended 🙂 … and tell me

CSS Position

You will be able to manipulate the exact position of your HTML elements

Position Relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we can make it abit to right or to left , up , down or mix of them … i like “mix” remeber me “DevMix” 🙂 so the css code will be :

 

 h3 { 
 position: relative; 
 top: 15px;
 left: 150px;
 }
 p { 
 position: relative; 
 left: -10px;
 }

See this to understand more :

BeforeCSS    After Positioning

Position Absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the browser’s viewable area, so be sure you are measuring from that point.

CSS Code :

 h3 { 
 position: absolute; 
 top: 50px;
 left: 45px;
 }
 p{ 
 position: absolute; 
 top: 75px;
 left: 75px;
 }

CSS –  Layers

In CSS, each element is given a priority. HTML elements that appear later in the source code than others will have a higher priority by default. If there are two overlapping CSS positioned elements, the element with the higher priority will appear on top of the other. To manually define a priority, set the z-index value. The larger the value, the higher the priority the element will have.

CSS Code:

 h4{ 
 position: relative; 
 top: 30px;
 left: 50px;
 z-index: 2;
 background-color: #336699;
 }

 p { 
 position: relative; 
 z-index: 1; 
 background-color: #FFCCCC;
 }

CSS – Display

Display Block and Inline

are you bored from using <br/> tag ?? yes me too .. what will we so if we have ablock of links … wil we using <br/> tag alot and alot ?? no css will make it easy for you let’s have an example :

CSS Code:

 a { display: block; }
 p { display: inline; }

HTML Code :

  <a
href=”https://developersmix.wordpress.com”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<p>These Links </p>
<p>belong</p>
<p>to </p>
<p>DevMix blog.</p>

Display:

Developers Mix
Developers Mix
Developers Mix
Developers Mix
Developers Mix

    These Links     belong   to     DevMix blog

 

Display None (Hidden)

At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of JavaScript, you can create collapseable menus.This is a simple example of how to hide an element.

CSS Code:

p.show { display: block }
p.hide { display: none; }

HTML Code:

<p class="show">This paragraph is displayed correctly because 
it has a display value of "block".</p>

<p class="hide">This paragraph is hidden because 
it has a display value of "none". Why am I even
writing anything in here?</p>

Display:

This paragraph is displayed correctly because it has a
display value of “block”.

Finally

I hope add something new to ur knowleadge ,,, thanks for reading …
we wait your feedback ….. ohhh Dont Forget we will make articles
about CSS3 … Don’t Miss it 😀

By : Mohammed Gabrail

10 Articles Introduction to HTML5 is Done !

Hey all, devmix promise with a few articles of HTML5 in 3 days .. and it’s done 🙂
we promise also with other articles in HTML5 in the other sides of this language, wait us very soon isA .. we only need one thing from you .. Your feed Back

The 10 articles are as follow:

HTML5 — How came to be ?	By Mohamed Gebril
Detecting HTML5 Features	By Mohamed Ibrahim
HTML5 getStarted();	By Mohamed Ashraf
HTML5 – Canvas element	By Mai Mohamed
HTML5 – Video element	By Medhat Dawoud
HTML5 – Geolocation	By Eman Elma3sarawi
HTML5 – Local Storage	By Maha Elbasuony
HTML5 – Let’s Take This Offline	By Amar Ashor
HTML5 – What Is MiCroData?	By Dina Wasef
HTML5 – Fantastic Form	By Medhat Dawoud

---

We hope that these articles were useful for you, wait us soon for more articles and keep contacting us:

DevMix Official Page on facebook
DevMix Page on GooglePlus
DevMix Team group on facebook
DevMix2011@gmail.com
http://twitter.com/DevMixTeam

🙂 Good Luck For All 🙂

HTML5 – Fantastic Form

1-   Web Forms before HTML5
2-   Dive into HTML5 Form of madness
3-   PlaceHolder Text
4-   Autofocus fields
5-   E-mail Addresses
6-   Web Addresses
7-   Numbers As Spinboxes
8-   Numbers As Sliders
9-   Data Pickers
10- Search Boxes
11- Find more

————————————————————————————————————————————

1- Web Forms before HTML5

Everybody knows about web forms, right? Make a <form>, add a few <input type=”text” /> elements and maybe an <input type=”password” />, finish it off with an <input type=”submit” /> button, and you’re done.

try it now:

  <form>
	username: <input type="text" name="username"/>
	password: <input type="password" name="pass"/>
	<input type="submit" name="submit" value="submit"/>
  </form>

With these few types of elements in the above code, you can make a login form like this :

it’s so classic .., the following table collect the input types in HTML4 :

ok , let’s make more sense with HTML5 🙂

————————————————————————————————————————————

2- Dive into HTML5 Form of Madness

Yes, it’s a form of madness when you make some thing which was taking hours of your time only in a moment with one line or with adding one attribute.. no more words to say, only look at the following examples of forms wrtten in HTML5 and then let’s learn each new feature

example1

example2

example3 – this example uses also CSS3 🙂

ok let’s explore the features 😀

————————————————————————————————————————————

3- PlaceHolder Text

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.

Create a new HTML form and add a form element inside the body element as follow :

<html>
	<head>
		<title>DevMix Web Series</title>
	</head>
	<body>
		<form>

		</form>
	</body>
</html>

then, start with the first new feature today write this inside the form element

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

then the result simply will be as follow:

it’s done now 😀

————————————————————————————————————————————

4- Autofocus Fields

Google is the most famous search engine all over the world .. because they care of the HCI that make the visitor come again, and from these aspects of HCI when you login to Google.com the design is very simple and the search box is autofocused, google used to use javascript for that till HTML5 come to life .. which make this in a very simple way.

ok, add more than element in a form like this:

<form>
	<input type="text" />
	<input type="text" />
	<input type="text" />
</form>

and the result will be as follow (no text is focused when running the page) :

and to add the autofocus feature you will make the following change:

<form>
	<input type="text" />
	<input type="text" autofocus/>
	<input type="text" />
</form>

try it your self and you will get the centered text focused .. as you see the autofocus attribute is a naked attribute that take no value

very simple 🙂

————————————————————————————————————————————

5- E-mail Addresses

HTML5 looks for the most important types that we were using javascript for and it might be quit complicated and make it easy for us, one of them is the Email address type, all browsers support that type.

using the Email type like the following:

<form>
   <input type="email">
   <input type="submit" value="Go">
</form>

then try to write any thing without the structure of the email addresses and press the Go button and the result will be as follow:

it makes a validation for the entered text .. automatically 🙂

Make sense, doesn’t it ?

————————————————————————————————————————————

6- Web Addresses

the same as the Email addresses making a validation .. try it your self

<form>
	<input type="url">
	<input type="submit" value="Go">
</form>

and if you enter a not valid URL this message will appear

————————————————————————————————————————————

7- Numbers As Spinboxes

My point is, you don’t often ask for “just a number” It’s more likely that you’ll ask for a number in a particular range, and you may only want certain kinds of numbers within that range—maybe whole numbers but not fractions or decimals, or something more esoteric like numbers divisible by 10. HTML5 has you covered. Let’s look at an example:

<form
      <input type="number"
       min="0"
       max="10"
       step="2"
       value="6">
</form>

this shot from Opera browser

it represents the numbers good ..

————————————————————————————————————————————

8- Numbers As Sliders

The same as the number as spinbox but with another GUI (a slider), the example will clear it.

try it your self:

<form>
    <input type="range"
       min="0"
       max="10"
       step="2"
       value="6">
</form>

and the result will be:

i think it makes the whole difference.. 🙂

————————————————————————————————————————————

9- Data Pickers

HTML5 finally defines a way to include a native date picker control without having to script it yourself. In fact, it defines six: date, month, week, time, date + time, and date + time – timezone.

supporting the data picker in browsers

Opera give the support for the datapicker in all flavors..  you will find one of them if you try this code out:

<form>
	<input type="datetime"/>
</form>

this will give the following result only on Opera:

there are a lot of the Data Pickers .. explore them your self 😉

————————————————————————————————————————————

10- Search Boxes

Try this out:

<form>
  <input name="q" type="search">
  <input type="submit" value="Find">
</form>

this make some special features to this text box, like a small x in the end of the text box when clicking on it, it clears the box, this appear in the Safari and the chrome browsers.

the result will be as follow:

using the CSS you can change the shape of the textbox as you like..

————————————————————————————————————————————

11- Find more..

this article is a push for you to explore the fantastic forms in HTML5 not collecting all features .. you can get the others and read more from these links .. thanks

• http://www.w3schools.com/html5/tag_input.asp
• http://diveintohtml5.org/forms.html
• http://simon.html5.org/html-elements

i’m waiting for your feeds 🙂

HTML5-What Is MiCroData?

 

What Is MiCroData?

One of the most overlooked new features of HTML5 is Microdata. Microdata allows us to more specifically categorize and label our web content in a machine-readable  way. Why this is important is because it may positively affect your search results 

When you search for something on Google or elsewhere, you get a list of links with a few sentences of description below them. We all use these descriptions—which Google calls “Rich Snippets”—to determine which link to click on

 

Why would you want to do this???  There are lots of reasons

 >>>>Here a few possible one

 

 you can mark up the date of an event, so a browser can automatically offer to add it to a visitor’s calendar  .

You can mark up your contact information, so a browser can automatically offer to add it to a visitor’s address book    .

You can mark up your blog post, so feed readers can just look at your HTML and automatically extract a feed from it        .

You can mark up your resume, so that when you use a site like LinkedIn you can just point it at your resume page and it can automatically extract all the information it needs

 

 

Microdata is about applying additional semantics to data that’s already visible on your web page

With just a few simple lines of code, easily memorable HTML5 Microdata allows you to mark up pages with semantic meaning

Microdata is not designed to be a standalone data format. It’s a complement to HTML

Microdata is part of the html5 spec though, and it currently has the backing of 

 Google, Bing, and Yahoo and so has a good chance of becoming a standard we all support

.

 How It WorKs?

 

To use Microdata, we must add at least three new attributes to our existing HTMl 

 To use Microdata  all we have is really just adding some extra attributes to your existing HTMl . Where microformats uses classes, microdata primarily uses 3 new attributes

>Itemscope

>Itemtype

>Itemprop

The itemscope attribute is a boolean attribute that tells any machine that is reading our document that there is Microdata on this page, and this is where it starts. You are creating the item with the use of itemscope Any element with an itemscope can also have the itemtype attribute. .

 The itemtype attribute, if specified, must have a value that is a valid URL that is an absolute URL. 

 

Itemprop defines a property of the item that means it giving the context of our itemAnd

here there is example to show this

 

                                                           

And the result is this

                                                                                                                                                                                                                                                                                                                                                                                      

The MiCroData DOM API

Microdata becomes even more helpful when you start using the associated DOM API to manipulate items and properties on a page programmatically, perhaps to present the information in a searchable/filterable manner, or deliver it to another application somewhere else.

 

The API is very simple — you use the document.getItems() method to grab a nodelist containing the microdata items on a page. If you leave the arguments blank, you’ll just grab all items; or you can specify a specific itemtype URL as an argument to just grab items of that type. For example

Would grab our biography item and store it in a variable. Once you’ve grabbed your item(s), you can then access the different properties with the properties attribute

                                                                                                                MiCroData ;  PeOpLE  aNd BuisEness                                 

if you have ever searched someone’s LinkedIn results, you might have seen something like this

 

BUT Google will process three formats currently. They are RDFa, Microformats, and you Guessed >>>  Microdata & While LinkedIn uses Microformats, 

We can now provide context from our HTML to give better search results.

after using microdata  and TESTing  google result

That will show

And that is the extra context that google has shown

  MiCroData: EvEnts

The final example to talk about is the ability of giving some context of upcoming events through Microdata. Events are a common searched item. You may well be working on a website that has scheduled events, which you want to show. Let’s give a little more context for machines and see how it might be use

  

and the result will be

Google could use this additional data in search results

wit my best wishes by Dina Wasef   

HTML5 – Local Storage

For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data , This data may be stored in the registry, INI files, XML files, or some other place according to platform convention.

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because

• Cookies are included with every HTTP request, there by slowing down your web application by needlessly transmitting the same data over and over

• Cookies are included with every HTTP request, there by sending data unencrypted over the internet

• Cookies are limited to about 4 KB of data — enough to slow down your application, but not enough to be terribly useful

What we really want is?

• a lot of storage space

• on the client

• that persists beyond a page refresh

• and isn’t transmitted to the server

Before HTML5, all attempts to achieve this were ultimately unsatisfactory in different ways.

HTML5 Storage

it’s a way for web pages to store named key/value pairs locally, within the client web browser.

HTML5 offers two new objects for storing data on the client:

• sessionStorage – stores data for one session

• localStorage – stores data with no time limit

HTML5 Storage is based on named key/value pairs. You store data based on a named key, and then you can retrieve that data with the same key.

The sessionStorage Object

To create a sessionStorage:

<script type=”text/javascript”>

sessionStorage.Fname=”Maha”;

sessionStorage.lname=”Elbasuony”;

document.write(“The FirstName: “+sessionStorage.Fname+” And The LastName : “+sessionStorage.Lname”);

</script>

OUTPUT

the FirstName: Maha & The LastName: Elbasuony

The localStorage Object

To create a localStorage

<script type=”text/javascript”>

localStorage.Fname=”Maha”;

localStorage.lname=”Elbasuony”;

document.write(“the FirstName: ” + localStorage.Fname + ” & The LastName: “+localStorage.lname);

</script>

OUTPUT

the FirstName: Maha & The LastName: Elbasuony

Also API is extremely straight forward and basically consists of 4 main methods:

1. setItem(key, value)
2. getItem(key)
3. removeItem(key)
4. clear()

to Set a key/value pair & Retrieves the current value associated with the Web Storage key use getItem() & setItem() methods

<script type=”text/javascript>

var foo = localStorage.getItem(“bar”);

localStorage.setItem(“bar”, foo);

document.write(localStorage.getItem(“bar”));

</script>

OUTPUT

foo

To remove the value for a given named key

<script type=”text/javascript>

localStorage.removeItem(“bar”);

document.write(localStorage.getItem(“bar”));

</script>

OUTPUT

NULL

Clear the entire storage area

localStorage.clear();

Tracking Changes to the HTML5 Storage Area

If you want to keep track programmatically of when the storage area changes, you can trap the storage event. The storage event is fired on the window object whenever setItem(), removeItem(), or clear() is called and actually changes something.

HTML5 Storage in Action

In Halma game, There’s a small problem with the game, if you close the browser window mid-game, you’ll lose your progress. But with HTML5 Storage, we can save the progress locally, within the browser itself

Make a few moves, then close the browser tab, then re-open it. If your browser supports HTML5 Storage, the demonstration page should magically remember your exact position within the game, the position of each of the pieces on the board, and even whether a particular piece is selected.

Try  😀

http://diveintohtml5.org/examples/localstorage-halma.html

 

 

With My Best Wishes

Maha Elbasuony